引导下拉不起作用

我无法使引导下拉工作。这里是我的导航HTML：引导下拉不起作用

<ul class='nav'> 
    <li class='active'>Home</li> 
    <li class='dropdown'> 
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">asds</a></li> 
     <li class="divider"></li> 
    </ul> 
    </li> 
    <li>Payday loans</li> 
    <li>About</li> 
    <li>Contact</li> 
</ul>

而且这里的脚本：

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('.dropdown-toggle').dropdown() 
    }); 
</script>

我在做什么错？谢谢你的回答！

来源

2012-09-17 hjuster

在类似张贴检查我的答案 http://stackoverflow.com/questions/15592158/twitter-bootstrap-dropdown-not-working-in-any-browser/23486239#23486239 –

我的问题是缺少bootstrap js文件，以防别人帮助其他人 – Drewdavid

我更新了我的''''Gruntfile.js'''，它改变了'''jsFileList'''的一些路径...更新路径并运行相应的Grunt任务（grunt dev/grunt build/etc）解决了我的问题问题。 –

工作演示：http://codebins.com/bin/4ldqp73

试试这个

<ul class='nav'> 
    <li class='active'>Home</li> 
    <li> 
    <div class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">    
     <li><a href="#">asds</a></li> 
     <li class="divider"></li> 
     </ul> 
    </div> 
    </li> 
    <li>Payday loans</li> 
    <li>About</li> 
    <li>Contact</li> 
</ul>

来源

2012-09-17 12:06:53 gaurang171

Oups ...愚蠢的我...我缺少bootstrap.css文件。现在工作正常，谢谢！ – hjuster

+25

演示中的下拉菜单似乎不再有效，或者问题出在我的浏览器上。 – Noah

您是否包含jquery.js？

此外，比较这行代码与你：

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

看到这个版本的作品确定。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Bootstrap dropdown</title> 
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> 

</head> 
<body> 
    <div class="navbar"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <ul class="nav"> 
        <a class="brand" href="#">w3resource</a> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
        <li class="dropdown" id="accountmenu"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">PHP</a></li> 
          <li><a href="#">MySQL</a></li> 
          <li class="divider"></li> 
          <li><a href="#">JavaScript</a></li> 
          <li><a href="#">HTML5</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="container-fluid"> 
    <h1>Dropdown Example</h1> 
    </div> 
    <script type="text/javascript" src="js/jquery-latest.js"></script> 
    <script type="text/javascript" src="js/bootstrap.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.dropdown-toggle').dropdown(); 
     }); 
    </script> 
</body> 
</html>

来源

2012-09-17 12:05:29 Frankline

FYI：如果你有bootstrap.js，你应该不加引导，dropdown.js。我不确定bootstrap.min.js的结果。

来源

2013-01-22 01:37:49 Fahrenheit

谢谢。我有dropdown.js和bootstrap.js，因此它不起作用。删除dropdown.js解决了这个问题。 – nyxz

你是最好的人，我花了大约6个小时在这找到问题的地方!!，再次感谢.. – Adel

非常感谢你，先生！我有同样的问题，但我有'bootstrap.js'和'bootstrap.min.js.'。当我删除后者时，它可以工作。 – 2014-06-05 02:56:04

对于你的风格，你需要通常只是</head>元素

<link href="css/bootstrap.css" rel="stylesheet">

下一页之前，包括自举的css文件，你需要包含js文件，它的建议，包括他们在的结束文件，一般在</body>之前，因此页面加载速度更快。

<script src="js/jquery.js"></script>   
<script src="js/bootstrap.js"></script>

来源

2013-03-15 19:36:37

106

我有同样的问题。后一对夫妇的麻烦拍摄时间发现，

我

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script> 
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

代替，

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script> 
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

希望这可以帮助别人

来源

2014-06-01 22:08:03

有什么区别？ – CodyBugstein

@Imray js文件的顺序... hth ... –

为我做了诀窍 –

你要导入此文件到您的html的<head></head>。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

来源

2014-06-27 03:22:35 Martin

我不知道为什么或者我做错了什么，但是这个答案对我来说是这样做的。谢谢马丁！ – booleanCube

当我包含bootstrap.min.js两次时，我遇到了同样的问题。删除其中一个，它开始工作。

来源

2014-07-10 10:27:53 kubilay

这解决了我的问题。我的角度应用程序通过吞吐任务拉入多个副本，以注入我的bower_components – Pakage

这是我的情况中的问题！...谢谢 – MarioAraya

修正了我的太多，非常感谢 –

在正文标签中添加以下行。

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://code.jquery.com/jquery.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files 
     as needed --> 
    <script src="js/bootstrap.min.js"></script>

来源

2014-08-05 20:00:34

谢谢，这节省了我一些时间。 – DrewT

我有同样的问题，这使我在这里。

我的问题：我使用推荐的jQuery 1.12.0版本作为我的jquery脚本文件。

解决方案：用jquery 2.2.0版本替换jquery脚本。

为我解决了这个问题。

来源

2016-02-06 17:11:50

在头部分试试这个

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

来源

2016-02-17 22:06:17

你必须检查冲突的CSS文件/例如性能，你可以有“.nav”自定义样式的内容在其他地方尝试禁用自己的CSS文件，并检查如果工作再检查哪个文件或自定义样式，使冲突也确保你包括你的代码

来源

2016-04-18 22:18:53 Mancy

这里我所做的是在bootstrap.min.js .....

只是删除bootstr从我的项目ap.min.js并添加bootstrap.js它和它开始工作........

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
        "~/Scripts/bootstrap.js" 
        //"~/Scripts/bootstrap.min.js"));

来源

2016-06-08 12:34:37

添加到#kubilay答案：每个文档可以有一个名为“A”的类。 .min.css/.min.js - 通常是相同的css和js文件，所有空格都从中删除。它使它们更小并且加载速度更快。浏览器无论如何都不需要空格。 –

删除一个，如果你已经使用两者 –

两个引导和jQuery必须包括：

<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script> 

<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" /> 
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>

注意：jquery-xxxmin.js版本必须是2.xx版本 !!!

来源

2016-07-19 18:42:04 NotAMonkey24

我想通了，并为此IST最简单的方法只是复制和过去的引导链接的CDN可以在https://www.bootstrapcdn.com/被发现和jQuery的CDN脚本，可以在这里找到https://code.jquery.com/后您复制环节，引导链接在HTML和jQuery脚本的头贴粘贴HTML的身体像下面的例子：

<!DOCTYPE html> 
    <html> 
     <head> 

     <title>Purrfect Match Landing Page</title> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <!--<link rel="stylesheet" href="griddemo.css"> 

     <!-- Optional theme --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 

     </head> 

     <body> 

     <!-- Latest compiled and minified JavaScript --> 
     <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">  </script>  
     </body> 
    </html>

对我的作品完美希望它的工作原理也为大家:)

来源

2016-11-15 20:54:35

引导下拉不起作用

回答

相关问题