導航欄切換按鈕不顯示折疊的元素

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

您有錯誤的data-target屬性和css規則，該規則限制了導航高度（50像素），而該高度無法使其正常擴展。 而且我相信父元素應該是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">