引导程序的下拉菜单不起作用？

我想创建与响应功能的下拉菜单，但是当我点击他们，那么没有什么是开在这里的下拉菜单中不起作用的代码是引导程序的下拉菜单不起作用？

 <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

引导程序的下拉菜单不起作用？

回答

相关问题