Question

我正在尝试创建一个按钮，当屏幕变得太小时，它会显示折叠的导航链接。该按钮确实实现了，但除了在屏幕变小时出现以外，我无法执行任何操作。

切换按钮也会创建小'＆gt;'箭头，当我只想在按钮中有白色“ - ”行时。

我意识到jquery和bootstrap的js文件应该包含在body标签的底部，但到目前为止，即使添加了这些文件，我也没有运气。任何帮助表示赞赏。

https://codepen.io/Tintinator/pen/NvKRvO

<div class="navbar navbar-default navbar-static-top navbar-inverse">

  <div class="container">

    <!-- BRAND, BUTTON -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-
      toggle="collapse" data-target=".navbar-nav">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>>
        <span class="icon-bar"></span>>
        <span class="icon-bar"></span>>
      </button>
      <a class="navbar-brand" href="#">
        <img src="./newnewfoy.png">
      </a>
    </div>

    <!-- NAV LINKS -->
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav" id="navilinks">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Event</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Volunteer</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Sponsors</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Contact</a>
        </li>
      </ul>
      <div class="medialinks hidden-sm hidden-xs">
        <a id="YOUcon" class = "mediacon" href="www.google.com"></a>
        <a id="IGcon" class = "mediacon" href="www.google.com"></a>
        <a id="TWTcon" class = "mediacon" href="www.google.com"></a>
        <a id="FBcon"  class="mediacon" href="www.google.com"></a>
      </div>
    </div>

  </div>

</div>

Answer 1

你有错误的数据目标属性和限制导航高度（50px）的css规则，它不允许它正确扩展。而且我认为父元素应该是nav而不是div。

请改为尝试：

<!-- NAVIGATION BAR -->
<nav class="navbar navbar-default navbar-static-top navbar-inverse">

  <div class="container">

    <!-- BRAND, BUTTON -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navilinks" aria-expanded="false">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="./newnewfoy.png">
      </a>
    </div>

    <!-- NAV LINKS -->
    <div class="navbar-collapse collapse" id="navilinks">
      <ul class="nav navbar-nav" >
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Event</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Volunteer</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Sponsors</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Contact</a>
        </li>
      </ul>
      <div class="medialinks hidden-sm hidden-xs">
        <a id="YOUcon" class = "mediacon" href="www.google.com"></a>
        <a id="IGcon" class = "mediacon" href="www.google.com"></a>
        <a id="TWTcon" class = "mediacon" href="www.google.com"></a>
        <a id="FBcon"  class="mediacon" href="www.google.com"></a>
      </div>
    </div>

  </div>

</nav>

https://codepen.io/anon/pen/oevYvp

Answer 2

我不确定这是不是，但是你添加了插件吗？（见图）

Answer 3

在您的codepen中，我修改了几行代码，似乎可以解决这个问题。我将数据目标从类改为#navbar的id，然后更新“NAV LINKS”中的初始div以包含#navbar的id。我为你分叉你的codepen。 https://codepen.io/ckroll17/pen/qXWqbV

<!--           
      Changed button to data-target to #navbar
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-nav"> -->
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img src="./newnewfoy.png">
          </a>
        </div>

        <!-- NAV LINKS -->
        <!-- Added an id of navbar to the class directly below -->
        <div id="navbar" class="navbar-collapse collapse">

Navbar-toggle按钮不显示折叠元素

3 个答案: