如何仅通过单击打开和折叠同一个 JQuery 手风琴

Posted 2023-03-24

【中文标题】如何仅通过单击打开和折叠同一个 JQuery 手风琴

【英文标题】：How to open and collapse the same JQuery accordion with click on it only

【发布时间】：2015-05-19 16:49:57

【问题描述】：

试图让手风琴在被点击时打开和折叠仅。我可以打开/折叠它，但是当点击另一个手风琴时它会关闭也。

它应该独立于其他手风琴自行打开或关闭。

这是我尝试过的。

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');
    );

小提琴： Demo

【问题讨论】：

我没有遇到问题 (I am able to able but it is getting close when I select the other accordion)，但你的小提琴工作正常，除了所有手风琴在开始时都是打开的。

【参考方案1】：

我用一些 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);

    );
);

请查看fiddle

【参考方案2】：

点击即可轻松启动accordion HTML

    <button type="button" class="btn openpanel">Open panel 3</button>
    <button type="button" class="btn closepanel">Close panel 3</button>
    <hr>
    <div class="panel-group" id="accordion">
       <div class="panel panel-default">
         <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel 1</a>
            </h4>
         </div>
         <div id="panel1" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 1
            </div>
        </div>
       </div>
       <div class="panel panel-default">
         <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 2</a>
            </h4>
         </div>
         <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 2
            </div>
         </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Panel 3</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 3
            </div>
        </div>
      </div>
  </div>

简单的js代码

$(".openpanel").on("click", function() 
   $("#panel3").collapse('show');
);
$(".closepanel").on("click", function() 
   $("#panel3").collapse('hide');
);
$('#accordion').on('show.bs.collapse', function () 
   $('#accordion .in').collapse('hide');
);

希望对你有帮助。