Question

我有一个带有以下标记的bootstrap 3.2手风琴菜单

<div class="accordion">
  <div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" href="#collapseFour">Cleaning and Painting</a> </div>
    <div class="accordion-body collapse" id="collapseFour">
      <div class="accordion-inner">
        <ul class="links">
          <li class="l1 open"><a href="air-compressor.html">Air Compressor</a>
          <li class="l2"><a href="paint-sprayer.html">Paint Sprayer</a>
          <li class="lL"><a href="pressure-cleaner.html">Pressure Cleaner</a>
        </ul>
      </div>
    </div>
  </div>
</div>

单击子<li>时，在这种情况下，Air Compressor，它会将<li>类设置为打开。现在我需要强制菜单崩溃（即打开），标记需要如下所示：

<div class="accordion">
  <div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" href="#collapseFour">Cleaning and Painting</a> </div>
    <div class="accordion-body collapse in" id="collapseFour" >
      <div class="accordion-inner">
        <ul class="links">
          <li class="l1 open"> <a href="air-compressor,48.html">Air Compressor</a> </li>
          <li class="l2"> <a href="paint-sprayer,49.html">Paint Sprayer</a> </li>
          <li class="lL"> <a href="pressure-cleaner,50.html">Pressure Cleaner</a> </li>
        </ul>
      </div>
    </div>
  </div>
</div>
</div>

我正在使用以下jQuery添加＆＃34; open＆＃34;已点击的孩子<li>的课程。

(function($){ 
            $(document).ready(function(){
            var pathname = window.location.pathname,
            page = pathname.split(/[/ ]+/).pop(),
            menuItems = $('.accordion-inner .links a');
            menuItems.each(function(){
            var mi = $(this),
            miHrefs = mi.attr("href"),
            miParents = mi.parents('li');
            if(page == miHrefs) {
            miParents.addClass("open").siblings().removeClass('open');
            }
        });
    });
})(jQuery);

我需要能够折叠它所属的DIV，以便用户知道他们正在查看哪个部分。希望我有意义。

非常感谢任何帮助。

提前致谢

Answer 1

考虑使用以下jquery代码：

$('.links li a').click(function(e){
    e.preventDefault();
    $('.accordion .in').collapse('hide');
});

DEMO

如何在单击子li时强制bootstrap accordion菜单折叠

1 个答案: