Bootstrap 3 - 切换 - 2 个按钮，2 个元素 - 如何 show/hide？

Question

我正在构建一个布局模板，供开发人员使用 Bootstrap 3.3.6 集成到他们的 AngularJS/Bootstrap 应用程序中。此布局具有左侧导航上下文菜单，打开时它会滑过主页内容的顶部，或者可以选择 'pinned' 打开，然后将主要内容推到右侧。

导航本身采用包含两个按钮的无序列表形式。这个想法是，当单击一个按钮时，子菜单内容的相关 div 会切换显示（使用 bootstrap 'collapse' 和 'in'）class es。任何其他子菜单内容 div 元素应设置为不显示（没有 'in' class）。

这变得棘手了。如果您只单击一个按钮或另一个专门控制它的相关内容元素，它工作正常，切换相关内容的显示。但是，如果您单击每个按钮而不再次单击同一个按钮以关闭其相关内容，则内容 divs 的行为是意外的，其中单击的第二个导航按钮会覆盖第一个导航按钮的行为，并且尽管如此，它的内容仍然存在再次单击第一个导航按钮。

我的期望是菜单按钮需要起到真正的切换作用，只显示相关内容，所有其他菜单内容 div 不显示。

下面是导航的标记及其相关内容divs:

<div class="filter-bar pull-left">

    <ul class="">

        <li><!-- NAV ITEM 1 -->
            <button type="button" 
            id="left-nav-toggle-menu" 
            class="left-nav-toggle mnc-filter-icn" 
            title="menu">
                <i class="fa fa-list-ul fa-fw"></i>
            </button>
        </li>

        <li><!-- NAV ITEM 2 -->
            <button type="button" 
            id="left-nav-toggle-filters" 
            class="left-nav-toggle mnc-filter-icn" 
            title="filters">
                <i class="fa fa-filter fa-fw"></i>
            </button>
        </li>

    </ul>

</div>

<div class="collapse push-menu-content"><!-- NAV ITEM 1 CONTENT -->

    <div class="clearfix">

        <button type="button" 
        class="close left-nav-pin pull-right" 
        aria-label="Pin">
            <i class="fa fa-thumb-tack"></i>
        </button>

    </div>

    <ul>
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
    </ul>

</div>

<div class="collapse push-filter-content"><!-- NAV ITEM 2 CONTENT -->

    <div class="clearfix">

        <button type="button" 
        class="close left-nav-pin pull-right" 
        aria-label="Pin">
            <i class="fa fa-thumb-tack"></i>
        </button>

    </div>

    <ul>
        <li>Filter 1 Category</li>
        <li>Filter 2 Category</li>
        <li>Filter 3 Category</li>
    </ul>
</div>

现在切换导航内容的js函数：

$(document).ready(function(){
    $("button#left-nav-toggle-menu").click(function(){
        $("div.collapse.push-menu-content").toggleClass("in");
    });
    $("button#left-nav-toggle-filters").click(function(){
        $("div.collapse.push-filter-content").toggleClass("in");
    });
});

我不是 js 或 Bootstrap 专家，我只是使用 Bootstrap 文档（collapse 和 toggleClass）来创建这些函数。我需要知道 Bootstrap 的人的帮助来修改它们，以便导航按钮作为使用 Bootstrap 和 jQuery 的内置功能的内容的真正切换。

非常感谢任何帮助！

Answer 1

如果我没理解错的话，您想从任何打开的 div 中删除 .in class：

$("button#left-nav-toggle-menu").click(function(){
    $("div.collapse.push-filter-content").removeClass("in");
    $("div.collapse.push-menu-content").toggleClass("in");
});
$("button#left-nav-toggle-filters").click(function(){
    $("div.collapse.push-menu-content").removeClass("in");
    $("div.collapse.push-filter-content").toggleClass("in");
});

Bootstrap 3 - 切换 - 2 个按钮，2 个元素 - 如何 show/hide？

Bootstrap 3 - Toggle - 2 buttons, 2 elements - How to show/hide?

javascript

jquery

buttonclick

toggleclass

twitter-bootstrap-3