Question

我有以下按钮：

 <button type="button" class="navbar-toggle collapsed burger-button" data-toggle="collapse"
                data-target="#bs-navbar-collapse-1,#bs-navbar-collapse-2" aria-expanded="false">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

以下两个div：

 <div class="collapse navbar-collapse list-links" id="bs-navbar-collapse-1" style=" margin-left: 25%;">
        <ul class="nav navbar-nav navbar-right ">
            <li><a href="#">First</a></li>
            <li><a href="#">Second</a></li>
            <li><a href="#">Third</a></li>
            <li><a href="#">Fourth</a></li>
        </ul>
    </div>

<div class="collapse navbar-collapse list-links ftr" id="bs-navbar-collapse-2"
         style="width: 870px; margin: auto;">
        <ul class="nav navbar-nav  ">
            <li><a href="#">Fifth</a></li>
            <li><a href="#">Sixth</a></li>


        </ul>

    </div>

在页面的移动版本中，它们都不能被看到，只能通过页面顶部的汉堡包按钮进入。问题是两个div都被隐藏了，但是当点击汉堡按钮时，只能看到第一个div。

Answer 1

你的例子适合我。我在Firefox的Bootply上测试过它。请看一下：Bootply

我使用了Bootstrap（v3.3.7）和JQuery（v3.1.1）

您是否已将JQuery依赖项添加到项目中？

Answer 2

您可以使用多个ul标签，而不是使用多个div标签

<div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">First</a></li>
        <li><a href="#">Second</a></li>
        <li><a href="#">Third</a></li>
        <li><a href="#">Fourth</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Fifth</a></li>
        <li><a href="#">Sixth</a></li>
      </ul>
</div>

请参阅that example in w3schools。

如果你必须使用多个切换目标;看起来为了切换目标工作，目标应该是某些nav元素的子代。因此，如果第二个div在页脚中，您可以尝试用这样的导航标签包装它：

<footer>
    <nav>
        <div id="bs-navbar-collapse-2" ...>
          ...
        </div>
    </nav>
<footer>

请注意，这可能会导致需要其他一些css工作来防止不必要的样式。

汉堡按钮折叠多个div

2 个答案: