引導程序的下拉菜單不起作用？

我想創建與響應功能的下拉菜單，但是當我點擊他們，那麼沒有什麼是開在這裏的下拉菜單中不起作用的代碼是引導程序的下拉菜單不起作用？

 <div class="navbar-header"> 
      <button type="button" class="navbar-toggel" data-toggel="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     <a class="navbar-brand" href="#">RG_ACADEMY</a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#">Home</a></li> 

      <li class="dropdown"> 
       <a class="dropdown-toggel" data-toggel="dropdown" href="#">About us <span class="caret"> </span> </a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">About Academy</a></li> 
       <li><a href="#">Faculty Team</a></li> 
       </ul> 
      </li> 

       <li class="dropdown"> 
       <a class="dropdown-toggel" data-toggel="dropdown" href="#">Courses <span class="caret"> </span> </a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">JEE MAINS+ADVANCED</a></li> 
       <li><a href="#">JEE MAINS</a></li> 
       </ul> 
       </li> 

      </ul> 
     </div> 
    </div> 

    </nav>

，輸出爲也標誌我不明白爲什麼它是展示

來源

2016-04-26 Anchal Jain

入住德veloper的控制檯的錯誤... – MarcoS

檢查錯誤，也可以重現JsFiddle中的問題？ –

'navbar-toggel'這個類名拼錯了 - 應該是'navbar-toggle'。 – WillardSolutions

-2

體前試試這個：

<script> 
    $(function() { 
     $('.dropdown-toggle').dropdown(); 
    }); 
</script>

來源

2016-04-26 15:02:18 Rafael

這不是必須的essary，而類名拼寫錯誤。 – WillardSolutions

現在下拉是工作，但之後，當我點擊按鈕，那麼它不是隱藏 –

我以前使用的腳本是必要的，或者我可以刪除那個？ –

只需修復拼寫。如果Bootstrap拼寫錯誤，它無法正確定位你的類。引導使用拼寫toggle，不toggel -

<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> 
    <a class="navbar-brand" href="#">RG_ACADEMY</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Home</a></li> 

     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">About Academy</a></li> 
      <li><a href="#">Faculty Team</a></li> 
      </ul> 
     </li> 

      <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">JEE MAINS+ADVANCED</a></li> 
      <li><a href="#">JEE MAINS</a></li> 
      </ul> 
      </li> 

     </ul> 
    </div> 
</div>

來源

2016-04-26 15:04:40 WillardSolutions

有6個需要替換的'toggel'實例.... – WillardSolutions

你必須在代碼「toggel是切換」例如錯誤。

它沒有，如果你有很好的調用你的JS

你添加功能的JavaScript會自動引導漁獲

Example dropdown menu

來源

2016-04-26 15:06:02 JMF

它的工作原理。你的錯誤是你在代碼中的任何地方拼錯了toggle到toggel。糾正這一點，它一切正常。

<nav> 
<div> 
<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> 
     <a class="navbar-brand" href="#">RG_ACADEMY</a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#">Home</a></li> 
      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">About Academy</a></li> 
       <li><a href="#">Faculty Team</a></li> 
       </ul> 
      </li> 

       <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">JEE MAINS+ADVANCED</a></li> 
       <li><a href="#">JEE MAINS</a></li> 
       </ul> 
       </li> 

      </ul> 
     </div> 
    </div> 

    </nav>

包括引導類和jquery。

JSFIDDLE

來源

2016-04-26 15:07:19

嘗試此代碼爲您的問題

<script src="content/js/jquery.min.js"></script> 
<script src="content/js/bootstrap.min.js"></script> 
<script> 
$(document).ready(function() { 
$('.dropdown-toggle').dropdown(); 
}); 
</script>

來源

2016-04-26 15:26:21 Shadow

變化：dropdown-toggel到dropdown-toggle和data-toggel="dropdown"到data-toggle="dropdown"

部分糾正輸出：Demo

來源

2016-04-26 15:34:40

引導程序的下拉菜單不起作用？

回答

相關問題