Navbar-toggle Buttonに折りたたまれた要素が表示されない

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

あなたは間違ったデータ・ターゲットの属性と、それが適切に展開することはできませんNAV高さ（は50px）を制限するCSSルールを持っています。そして、私は親要素はdivではないnavする必要がありますと信じています。

代わりにこれを試してみてください：

<!-- 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

私はこれがされているかどうかわからないんだけど、あなたはプラグインを追加したのですか？あなたのcodepen内

Answer 3

（画像を参照）、私は数行のコードを修正し、トリックを行うようです。データターゲットをクラスから#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">