导航栏切换按钮不显示折叠的元素

Question

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

当我只想在按钮中使用白色“-”线时，切换按钮也会创建小的“>”箭头。

我意识到 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。我为你分叉了你的代码笔。 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">