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>

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

所以，如果你点击第二个菜单，反之亦然，如何关闭第一个菜单？

Answer 1

如果我是你，我会尝试将default accordion template与您现有的代码合并，因为您的代码中缺少大量的块。

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

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');
});

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

2 个答案: