navbarのブートストラップのドロップダウンメニューが開きません

私のnavbarの私のドロップダウンメニューが開いていない（開いていない場合）か、常に開いています（下のバージョンで行ったように開いています）。私が開いていない場合でも、それを開くことができますか、どうすればもう一度閉じることができますか？（jQのへのリンクuが ERYとbootstrapcdnがあります）：ここではnavbarのブートストラップのドロップダウンメニューが開きません

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body data-spy="scroll" data-target=".navbar"> 
 
    <!--navbar starts here--> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" 
 
    data-target=".navbar-collapse"> 
 
      <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 alt="Brand" src="..."> 
 
     </a> 
 

 
     <div class="projectName"> 
 
      <a href="#">ДЖУЛИН</a> 
 
     </div> 
 
     </div> 
 

 
     <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"> <a href="#home"> HOME </a> </li> 
 
      <li class="dropdown open" role="presentation"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"  role="button" aria-haspopup="true" aria-expanded="false"> WORK <span class="caret"></span> 
 
      </a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#work1" class="scroll-nav">Work 1</a></li> 
 
       <li><a href="#work2" class="scroll-nav">Work 2</a></li> 
 
      </ul> 
 
     </li> 
 

 
     <li class="active"> <a href="#about"> ABOUT </a> </li> 
 
     <li class="active"> <a href="#faq"> FAQ </a> </li> 
 
     <li class="active"> <a href="#contact"> CONTACT </a></li> 
 
     </ul> 
 

 
    </div> <!--collapse--> 
 
    </div> <!--header--> 
 
</div> <!-- end nav container --> 
 
</nav> <!-- end navbar-->

出典

2017-07-28 Julin

はあなたが解決https://jsfiddle.net/08xp0q92/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<body data-spy="scroll" data-target=".navbar"> 
 
    <!--navbar starts here--> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" 
 
    data-target=".navbar-collapse"> 
 
      <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 alt="Brand" src="..."> 
 
     </a> 
 

 
     <div class="projectName"> 
 
      <a href="#">ДЖУЛИН</a> 
 
     </div> 
 
     </div> 
 

 
     <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"> <a href="#home"> HOME </a> </li> 
 
      <li class="dropdown open" role="presentation"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> WORK <span class="caret"></span> 
 
      </a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#work1" class="scroll-nav">Work 1</a></li> 
 
       <li><a href="#work2" class="scroll-nav">Work 2</a></li> 
 
      </ul> 
 
     </li> 
 

 
     <li class="active"> <a href="#about"> ABOUT </a> </li> 
 
     <li class="active"> <a href="#faq"> FAQ </a> </li> 
 
     <li class="active"> <a href="#contact"> CONTACT </a></li> 
 
     </ul> 
 

 
    </div> <!--collapse--> 
 
    </div> <!--header--> 
 
</nav> <!-- end nav container --> 
 
</body> <!-- end navbar-->

で行きます3210

bootstrap.jsを含める必要があります。

出典

2017-07-28 16:50:18 Shiladitya

navbarのブートストラップのドロップダウンメニューが開きません

答えて

関連する問題