Question

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

<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>

Demo

Answer 1

您可以尝试以下解决方法，用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

Answer 2

如果要显示默认的打开的折叠菜单，只需添加“ show”类。并在下面使用jquery

$('.collapsed').click(function(){
    $(this).next().addClass('show');
    $('.collapse').removeClass('show');
});

Demo

一次打开一个手风琴

2 个答案: