javascript - 单击第二个 Accordion 菜单时关闭打开的 Accordion 菜单，bootstrap

Question

我的网站在移动 View 中有两个图标。一个是搜索图标，另一个是菜单图标。两者都使用 Bootstrap Accordion 来显示和隐藏搜索选项和菜单选项。

Accordion 正在按预期工作。

但问题是当一个菜单打开时，如果您单击第二个菜单，它们都会保持打开状态。理想情况下，如果您单击第二个菜单，它应该关闭第一个菜单，反之亦然。

这是我的两个菜单的代码:

<button class="mobile-search navbar-toggle col-sm-1" type="button" data-toggle="collapse" data-target="#nav-search">
            <span class="sr-only">Toggle navigation</span>
            <i class="fa fa-search"></i>
</button>

<button class="navbar-toggle mobile-menu col-sm-1" type="button" data-toggle="collapse" data-target="#channel-list-mobile">
            <span class="sr-only">Toggle navigation</span>
            <img alt="Channel List Icon" class="img-responsive" src="/Images/ui/channel-list.png">
</button>

搜索菜单选项是这样的(只是一个例子):

<div class="collapse" id="nav-search">
<div class="row">
    <div class="col-xs-12">
        <div id="inline-search">
            <div class="search-type">
                <div class="row">
                    <label for="search-buy" class="radio-inline col-xs-6 inline-labels">
                        @Html.RadioButton("propertyType", 1, Shared.SearchCriteria.SaleProducts, new { id = "1" }) <span>Buy</span>
                    </label>
                    <label class="radio-inline rent-mobile col-xs-6 inline-labels">
                        @Html.RadioButton("propertyType", 0, !Shared.SearchCriteria.SaleProducts, new { id = "2" }) <span>Rent</span>
                    </label>
               </div>
          </div>
       </div>
    </div>
</div>

菜单选项代码:

    <nav class="visible-xs collapse" id="mobile-nav-accordion">
        <div class="panel-group" id="mobile-menu">
            <div id="channel-list-mobile" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                               home
                            </h4>
                        </div>
                    </div>
                    <!--nested accordion-->
                    <div id="mobile-menu-list" class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#mobile-menu-list" href="#services-mobile">
                                    Services <i class="fa fa-caret-down pull-right"></i>
                                </a>
                            </h4>
                        </div>
                        <div id="services-mobile" class="panel-collapse collapse">
                            <div class="panel-body">
                                <ul class="mobile-nav">

                                        <li>
                                            <a href="@Url">test...</a>
                                        </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</nav>

上面的代码只是为了展示我正在使用的 Bootstrap 结构。

关于如何在单击第二个菜单时关闭第一个菜单或反之亦然？

Answer 1

如果我是你，我会尝试合并 default accordion template使用您现有的代码，因为您的代码中缺少很多 block 。

您还应该使用这两个来控制打开/关闭哪些选项卡

class="panel-collapse collapse">
class="panel-collapse collapse in">

收起 = 当前打开
折叠 = 关闭