如何仅通过单击打开和折叠相同的JQuery手风琴 [英] How to open and collapse the same JQuery accordion with click on it only

问题描述

试图使手风琴打开并仅在单击时使其折叠 .我可以打开/折叠它，但是单击另一个手风琴时，它也会也关闭.

Trying to get the accordion open and collapse only when it's being clicked. I am able to open/collapse it but it is getting closed also when another accordion is clicked.

它应该独立于其他手风琴单独打开或关闭.

It should open or close on its own - independently from other accordions.

这是我尝试过的.

JS:

$(document).on("click", ".accordion-toggle", function () {
        if ($(this).attr('class').indexOf('open') == -1)
   $(this).toggleClass("open").next().slideToggle('fast');
        //Hide the other panels
        $(".accordion-toggle").not($(this)).removeClass("open");
        $(".accordion-content").not($(this).next()).slideUp('fast');
    });

提琴: 演示

推荐答案

我创建了一个带有一些CSS的新提琴...

I have created a new fiddle with some css...

HTML

<div class="accordion-container">
    <a href="#" class="accordion-toggle">Heading 1</a>
    <div class="accordion-content">
        Content 1
    </div>
</div>
<div class="accordion-container">
    <a href="#" class="accordion-toggle">Heading 2</a>
    <div class="accordion-content">
        Content 2
    </div>
</div>
<div class="accordion-container">
    <a href="#" class="accordion-toggle">Heading 3</a>
    <div class="accordion-content">
        Content 3
    </div>
</div>

JS

$(document).ready(function () {
    $('.accordion-toggle').on('click', function(event){
        event.preventDefault();
        // create accordion variables
        var accordion = $(this);
        var accordionContent = accordion.next('.accordion-content');

        // toggle accordion link open class
        accordion.toggleClass("open");
        // toggle accordion content
        accordionContent.slideToggle(250);

    });
});

请检查此小提琴

这篇关于如何仅通过单击打开和折叠相同的JQuery手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！