2017-09-13 8 views
0

モバイル時またはブラウザのサイズを変更したときに、クリックしたときにナビゲーションバーのドロップダウンメニューがドロップダウンしません。私は私の問題を詳述するためにここにnavbarコードを入れました。あなたの助けを前もってありがとう!Navbarメニューのドロップダウンが機能しない(クリックしてもドロップされません)

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#portfolio">Portfolio</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
    </div> 
</div> 
</nav> 
+0

それを行うこのブートストラップのですか?答えがイエスなら、コンポーネントを動作させるためにスクリプトを置いていますか? –

答えて

1

ブロあなただけの、これはそれがどのように動作するかである#data-targetで属性を見逃しています。

変更、それは一例に住んこの

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 

check the working demo here!

+0

他の人が問題を解決するのに役立つので、それを受け入れてください:) –

+0

#を追加しましたが、それでも動作しません。 – batman091716

+0

デモをチェックしてください私の答えに添付しました –

0

することにより、このライン

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="myNavbar"> 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#home">Home</a></li> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#portfolio">Portfolio</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
</nav>
あなただけ data-target="#myNavbardata-target="myNavbar"に#を欠場

関連する問題