Question

我一直在玩导航栏和菜单设置，但是当我重新调整浏览器窗口大小时，似乎无法触发汉堡菜单。

我在下面的尝试中，我定义数据切换并将其目标设置为主导航栏在重新调整浏览器大小时无法正常工作。

问题：

有没有人知道为什么hambuger菜单不会在使用此标记重新调整尺寸时触发？

<header>
  <div class="container-fluid">

    //Defined the toggle here, pointing it's data-target to the navBarCollapsable main nav bar.
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navBarCollapsable">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <div class="collapse navbar-collapse" id="navBarCollapsable">
      <nav>
        <ul id="menu" class="nav navbar-nav">
          <li><a>Selection:</a></li>
          <li>
            <a>Assets <span class="arrow">&#9660</span></a>
            <ul class="sub-menu">
              <li>
                <a href="#" class="small" data-value="option1" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 1</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option2" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 2</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option3" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 3</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option4" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 4</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option5" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 5</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option6" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 6</a>
              </li>
            </ul>
          </li>

          <li>
            <div class="horizontalgap" style="width:10px"></div>
          </li>
          <li><a>Profile:</a></li>
          <li>
            <a>Assets <span class="arrow">&#9660</span></a>
            <ul class="sub-menu">
              <li>
                <a href="#" class="small" data-value="option1" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 1</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option2" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 2</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option3" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 3</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option4" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 4</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option5" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 5</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option6" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 6</a>
              </li>
            </ul>
          </li>
          <li>
            <div class="horizontalgap-md"></div>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Answer 1

如果您查看此代码http://codepen.io/macsupport/pen/bKFzD，您会看到他的菜单类型都包含在导航代码中，因此请尝试使用<nav>

Answer 2

您的标记应在标记后立即显示。还要确保在bootstrap.js之前加载了jquery.js文件。

如何在Bootstrap 3中定义可折叠的汉堡包菜单？

2 个答案: