单击第二个手风琴菜单时，关闭打开的手风琴菜单，引导

Question

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

手风琴正在按预期的方式工作。

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

这是我的两个菜单代码：

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

上面的代码只是为了展示我正在使用的引导程序结构。

那么，如果您单击第二个菜单，反之亦然，如何关闭第一个菜单呢？

Answer 1

如果我是您，我会尝试将默认的手风琴模板与您的现有代码合并，因为您的代码中缺少很多块。

另外，您应同时使用这两个控件来控制打开/关闭哪些标签页

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

收起= 当前打开
收起= 已关闭

Answer 2

使用JavaScript将其修复。

为按钮添加了ID：

<button id="mobile-search-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 id="mobile-menu-button" class="mobile-menu navbar-toggle 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>

这是javascript修复程序：

var lastaccordion = null;
$('#mobile-search-button').click(function () {
    if (lastaccordion != null) {
        if (lastaccordion.attr('id') != 'nav-search') {
            lastaccordion.collapse('hide');
        }
    }
    lastaccordion = $('#nav-search');
});

$('#mobile-menu-button').click(function () {
    if (lastaccordion != null) {
        if (lastaccordion.attr('id') != 'channel-list-mobile') {
            lastaccordion.collapse('hide');
        }
    }
    lastaccordion = $('#channel-list-mobile');
});