Bootstrap - 导航 + 子导航在点击时显示和隐藏答案

【问题标题】：Bootstrap - navigation + sub nav shows and hides on clickBootstrap - 导航 + 子导航在点击时显示和隐藏
【发布时间】：2013-06-19 10:56:32
【问题描述】：

我正在尝试制作与下拉菜单具有类似效果的导航，但它不会显示带有子菜单的框，而是显示选项卡。我做到了，它工作得很好——我唯一的问题是当我点击按钮时子菜单会显示（这很好），但当我再次点击它时它不会关闭。所以我想做的是：点击按钮 - 子菜单显示 - 再次点击相同的按钮，子菜单隐藏。

<!-- Navigation bar -->
        <div class="container-narrow">
          <ul class="nav nav-pills nav-main">
            <li class="nav-size active"><a href="index.php">Home</a></li>
            <li class="nav-size"><a href="#tab1" data-toggle="tab">About</a></li>
            <li class="nav-size"><a href="#">Services</a></li>
            <li class="nav-size"><a href="#">Downloads</a></li>
                <li class="pull-right"><a href="#tab2" data-toggle="tab"><img src="img/flags/flags12.png" alt="flags" /></a></li>
                <li class="pull-right"><a href="#">Register</a></li>
                <li class="pull-right"><a href="#">Login</a></li>
          </ul>

                    <div class="tab-content">
                        <div class="tab-pane" id="tab1">
                            <ul class="nav nav-tabs nav-sub">
                                <li><a href="#">Services</a></li>
                                <li><a href="#">Site Services</a></li>
                                <li><a href="#">O'Leary Group</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="tab-content">
                        <div class="tab-pane" id="tab2">
                            <ul class="nav nav-tabs nav-sub">
                                <li class="pull-right"><a href="#"><img src="img/flags/en.png" /> English</a></li>
                                <li class="pull-right"><a href="#"><img src="img/flags/fr.png" /> French</a></a></li>
                                <li class="pull-right"><a href="#"><img src="img/flags/de.png" /> German</a></a></li>
                                <li class="pull-right"><a href="#"><img src="img/flags/pl.png" /> Polish</a></a></li>
                            </ul>
                        </div>
                    </div>
      </div><!-- / Navigation bar -->

【问题讨论】：

标签： twitter-bootstrap drop-down-menu tabs nav

【解决方案1】：

可能值得研究collapse plugin。您可以通过执行以下操作使其工作

<!-- Navigation bar -->
<div class="container-narrow">
    <ul class="nav nav-pills nav-main">
        <li class="nav-size active"><a href="index.php">Home</a></li>
        <li class="nav-size"><a href="#tab1" data-toggle="collapse" data-target="#tab1">About</a></li>
        <li class="nav-size"><a href="#">Services</a></li>
        <li class="nav-size"><a href="#">Downloads</a></li>
        <li class="pull-right"><a href="#tab2" data-toggle="tab"><img src="img/flags/flags12.png" alt="flags" /></a></li>
        <li class="pull-right"><a href="#">Register</a></li>
        <li class="pull-right"><a href="#">Login</a></li>
    </ul>

    <div class="collapse" id="tab1">
        <div class="tab-pane" >
            <ul class="nav nav-tabs nav-sub">
                <li><a href="#">Services</a></li>
                <li><a href="#">Site Services</a></li>
                <li><a href="#">O'Leary Group</a></li>
            </ul>
        </div>
    </div>

    <div class="tab-content">
        <div class="tab-pane" id="tab2">
            <ul class="nav nav-tabs nav-sub">
                <li class="pull-right"><a href="#"><img src="img/flags/en.png" /> English</a></li>
                <li class="pull-right"><a href="#"><img src="img/flags/fr.png" /> French</a></a></li>
            <li class="pull-right"><a href="#"><img src="img/flags/de.png" /> German</a></a></li>
        <li class="pull-right"><a href="#"><img src="img/flags/pl.png" /> Polish</a></a></li>
</ul>
</div>
</div>
</div><!-- / Navigation bar -->

它并不完美，但似乎选项卡不会呈现您需要 OOTB 的行为。

【讨论】：