首页 > 解决方案 > 一次打开一个手风琴

问题描述

创建一个可折叠的菜单,但需要一次打开一个手风琴,如果我单击另一个链接,那么首先应该折叠。

<ul class="nav navbar-nav left-navbar" id="sidenav01">
                            <li>
                                <a href="#" data-toggle="collapse" data-target="#toggleDemo" data-parent="#sidenav01" class="collapsed">
                                    Submenu 1
                                </a>
                                <div class="collapse" id="toggleDemo">
                                    <ul class="nav nav-list">
                                      <li><a href="#">Submenu1.1</a></li>
                                      <li><a href="#">Submenu1.2</a></li>
                                      <li><a href="#">Submenu1.3</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a href="#" data-toggle="collapse" data-target="#toggleDemo2" data-parent="#sidenav01" class="collapsed">
                                Submenu 2
                                </a>
                                <div class="collapse" id="toggleDemo2">
                                    <ul class="nav nav-list">
                                      <li><a href="#">Submenu2.1</a></li>
                                      <li><a href="#">Submenu2.2</a></li>
                                      <li><a href="#">Submenu2.3</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>

演示

标签: jquery

解决方案


您可以尝试以下解决方法以使用 jquery 折叠其他打开的 div

$(document).ready(function(){
$('.navbar-nav li a').on('click', function () {
    console.log('cilcked 2');
    $('.navbar-nav li a').not(this).next('div').removeClass('show');
});
});

JSFiddle


推荐阅读