jquery - bootstrap 3 中的 Accordion 菜单

Question

这是 fiddle .当我在 div 外部单击时，是否有任何选项可以关闭子菜单？

      <div class="accordion-group">
          <div class="accordion-heading">
               <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseTwo">
                   <i class="icon-th"></i> Layout
                </a>
          </div>
          <div id="collapseTwo" class="accordion-body collapse" style="height: 0px; ">
               <div class="accordion-inner">
                   <ul>
                      <li>This is one</li>
                      <li>This is two</li>
                      <li>This is Three</li>
                   </ul>
               </div>
           </div>
       </div>

我正在使用 bootstrap 3。

Answer 1

如果您看到 docs您可以使用 .collapse('hide') 方法关闭。

.collapse('hide')

Hides a collapsible element.

更新:

在单击文档时，您必须检查单击的元素是否在外部。

$(document).on('click', function (e) {
    // here you can change document to any div id 

    if (!$(e.target).closest('#leftMenu').hasClass('accordion')) { // checking if clicked element is outside `accordion` then only collapse

        $('.in').collapse('hide'); // .in as we need to collapse only the expanded section
    }
});

See Fiddle