導航欄下拉菜單無法打開

我的導航欄中的下拉菜單沒有打開（如果我忽略打開）或始終打開（當我按照以下版本添加打開時）。即使我忽略開放，又怎麼能夠再次關閉？（鏈接JQ ü紅黴素和bootstrapcdn在那裏）：導航欄下拉菜單無法打開

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

您必須包含bootstrap.js。

來源

2017-07-28 16:50:18 Shiladitya

導航欄下拉菜單無法打開

回答

相關問題