Twitter bootstrap 引导下拉菜单不工作(单击时不下拉)
我正在努力掌握bootstrap,但收效甚微。我只是想让这个模板的本地版本工作 我已经将html直接复制到html页面中,并仅使用我机器上最新下载的副本,以与网页相同的顺序引用css和js文件。但是,单击下拉列表旁边的箭头时不会发生任何情况(即,不显示菜单) 我曾尝试在JSFIDLE中复制代码,但这更糟糕,根本无法正确显示菜单 这是我的页面的输出。我还包括了下拉列表jsTwitter bootstrap 引导下拉菜单不工作(单击时不下拉),twitter-bootstrap,Twitter Bootstrap,我正在努力掌握bootstrap,但收效甚微。我只是想让这个模板的本地版本工作 我已经将html直接复制到html页面中,并仅使用我机器上最新下载的副本,以与网页相同的顺序引用css和js文件。但是,单击下拉列表旁边的箭头时不会发生任何情况(即,不显示菜单) 我曾尝试在JSFIDLE中复制代码,但这更糟糕,根本无法正确显示菜单 这是我的页面的输出。我还包括了下拉列表js <!DOCTYPE html> <html> <head><title>
<!DOCTYPE html>
<html>
<head><title>
Untitled Page
</title><link href="styles/bootstrap.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="JavaScript/html5shiv.js"></script>
<script src="JavaScript/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<script type="text/javascript" src="JavaScript/jquery.js" />
<script type="text/javascript" src="JavaScript/bootstrap-min.js" />
<script type="text/javascript" src="JavaScript/bootstrap-dropdown.js" />
</body>
</html>
无标题页
-
- 导航标题
登录
我还尝试添加此代码,但没有效果
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
$(文档).ready(函数(){
$('.dropdown toggle').dropdown();
});
只需删除type=“text/javascript”
这里是更新-我面临同样的问题,解决方案对我有效,希望它也对你有效
<script src="content/js/jquery.min.js"></script>
<script src="content/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
$(文档).ready(函数(){
$('.dropdown toggle').dropdown();
});
请在“bootstrap.min.js”文件之前包含“jquery.min.js”文件,如果无序排列顺序,它将不起作用。只需在打开body标记后添加这两个文件即可。请记住“仅在正文标记后”正文标记后的任何位置。如果您在body标签中添加下面提到的文件,那么您的问题仍然无法解决 所以在主体标签关闭之后或之前粘贴它们。。。 这100%有效。我已经测试过了,而且可以用了
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
我遇到了同样的问题,我删除了下面的脚本,它对我起了作用
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
将此脚本添加到我的代码修复了下拉菜单
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
$(文档).ready(函数(){
$('.dropdown toggle').dropdown();
});
您确定bootstrap.min.js
文件没有使用句点而不是破折号吗?我现在正在查看源代码,它使用句点.hi-我的文件以破折号命名,而不是句点。谢谢你的回答。我也面临着同样的问题,而你的解决方案奏效了。但你能解释一下hainv“text/javascript”的问题吗?添加$('.dropdown toggle').dropdown();解决了我的问题,谢谢。订单似乎确实相关。Flask Bootstrap with有一个Jinja2模板Bootstrap/base.html,其顺序正好如此。在我的例子中,我没有意识到这一点,而是将脚本再次包含在一个子模板中。这显然是由于ashishSober描述的订单问题导致下拉列表中断。通过添加$('.dropdown toggle').dropdown()解决了该问题;感谢无需添加$('.dropdown toggle').dropdown()。只需确保jQuery在引导的.js文件之前加载。谢谢,我整个下午都在寻找解决办法。加上这个解决了我的问题,谢谢。应包括在正确答案中。
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>