为什么下拉菜单不起作用
Why isn't is the drop down menu working
我想知道为什么下拉菜单不起作用。当我单击下拉菜单时,它没有出现。我正在使用 bootstrap。请告诉我为什么它不起作用。
<li id="megamenuID" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Categories
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<div >
<div class="row">
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-4 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
</div>
</div>
</li>
</ul>
</li>
您是否在 header 中包含了 bootstrap.js
脚本文件?它不起作用的主要原因是您没有包含它,或者您 miss-typed 一些东西。
你能告诉我们你包含了哪些脚本吗?
另外,请 运行 Mozilla 上的页面(如果可能),打开控制台并 post 屏幕截图。我们将能够查看是否存在任何 javascript
问题。
编辑:(基于 OP 第一条评论)
据我所知,您包含了 <script src="Scripts/jquery-1.9.1.js"></script>
,但没有包含 bootstrap.js
文件。
像这样包含它:<script src="Scripts/bootstrap.js"></script>
它应该可以工作。 (当然,如果bootstrap.js
位于Scripts
文件夹中,如果在其他文件夹中,请适当更改路径。)
如果这不再有效,请仅从 Mozilla 控制台 截屏并向我们展示那里发生了什么。
编辑 2:(基于 OP 第一条评论)
此外,删除这两个之一:
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
您要么想要使用缩小的 bootstrap.min.css
,对于巨大的 css
文件最好使用 min
版本,这样它不会产生大量流量,或者您将使用 non-minified
版本,即 bootstrap.css
.
我想知道为什么下拉菜单不起作用。当我单击下拉菜单时,它没有出现。我正在使用 bootstrap。请告诉我为什么它不起作用。
<li id="megamenuID" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Categories
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<div >
<div class="row">
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-4 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
</div>
</div>
</li>
</ul>
</li>
您是否在 header 中包含了 bootstrap.js
脚本文件?它不起作用的主要原因是您没有包含它,或者您 miss-typed 一些东西。
你能告诉我们你包含了哪些脚本吗?
另外,请 运行 Mozilla 上的页面(如果可能),打开控制台并 post 屏幕截图。我们将能够查看是否存在任何 javascript
问题。
编辑:(基于 OP 第一条评论)
据我所知,您包含了 <script src="Scripts/jquery-1.9.1.js"></script>
,但没有包含 bootstrap.js
文件。
像这样包含它:<script src="Scripts/bootstrap.js"></script>
它应该可以工作。 (当然,如果bootstrap.js
位于Scripts
文件夹中,如果在其他文件夹中,请适当更改路径。)
如果这不再有效,请仅从 Mozilla 控制台 截屏并向我们展示那里发生了什么。
编辑 2:(基于 OP 第一条评论)
此外,删除这两个之一:
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
您要么想要使用缩小的 bootstrap.min.css
,对于巨大的 css
文件最好使用 min
版本,这样它不会产生大量流量,或者您将使用 non-minified
版本,即 bootstrap.css
.