單擊第二個手風琴菜單時，關閉打開的手風琴菜單，引導

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