我认为代码不应该出现任何错误,因为我已经将其与视频教程进行了几次比较。但是,下拉菜单仍然不起作用。一定是文件目录或路径错误。请帮帮我。
<!DOCTYPE html>
<html>
<head>
<title>Dropdowns</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dd-menu" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">Dropdown</a></li>
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">Grid system</a></li>
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">Buttons and Icon</a></li>
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">Form control</a></li>
</ul>
</div>
</div>
<!--latest compiled and minified javascript-->
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.min.css" media="screen">
</body>
</html>
这是我的文件路径的屏幕截图。
我的屏幕输出有下拉按钮,但只能点击,没有任何功能。
最佳答案
调用jquery的脚本标签路径有错误。
对于您提供的示例,“js”文件夹与 html 文档位于同一文件夹中,正确的脚本标记是:
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
在 html 文档中使用相对路径的示例:
<script src="../js/jquery.js"></script> <!-- means "look one folder above this folder for the 'js' folder" -->
<script src="js/jquery.js"></script> <!-- means "look for the 'js' folder inside this folder. -->
<script src="/js/jquery.js"></script> <!-- means "look for the js folder in the server root". -->
进一步阅读:
关于javascript - bootstrap的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25013801/