由于某种原因，我的.click方法不适用于<div id=menuButton>。为什么？

这是我的下拉菜单html。最初，在CSS中显示菜单：none。

<!doctype html>
<html>
<head>
<title>DropDown Menu</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>DropDown Menu</h1>
<div id="menuButton" >Menu Button</div>
<div>
<ul id="dropdown">
<li>
<a href=""></a>Home</a>
</li>
<li>
<a href=""></a>Services</a>
</li>
<li>
<a href=""></a>About</a>
</li>
<li>
<a href=""></a>Contact</a>
</li>
<li>
<a href=""></a>Partners</a>
</li>
</ul>
</div>
<!-- Load the CDN first -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- If CDN fails to load, serve up the local version -->
<script>window.jQuery || document.write('<script src="js/jquery-2.1.4.js"></script>');</script>
<script src="js/script.js"></script>
</body>
</html>

这是我的jQuery脚本：

// script.js
$(function () {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});

上面的jQuery不起作用。但是，如果在div中添加一个id为menuButton的<p>标记，它就可以正常工作。有人能帮我吗？我已经挣扎了一段时间。

检查这个fiddle，我已经更正了您标记中的一些问题，例如制作

<a href=""></a>Home</a>

至

<a href="">Home</a>

你的代码工作正常，否则

您的代码中有几个问题：

1.等待DOM

问题是，您的脚本可能在DOM准备好之前就已经执行了。您应该只在文档准备好后触发脚本，即：

$(document).ready(function() {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});

否则，您将尝试向尚未存在的#menuButton添加单击处理程序。

2.修复<a>标签

以下代码行

<a href=""></a>Home</a>

应该变成：

<a href="">Home</a>

对其他定位标记也执行相同的修复。

除了HTML中的标记问题外，您的代码运行良好，正如我通过Jsfidle检查的那样https://jsfiddle.net/bryomckim/pmw7xjwf/

$(function () {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});

css

#dropdown {
display: none;
}

<!doctype html>
<html>
<head>
<title>DropDown Menu</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<!-- Load the CDN first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     
<script src="script.js"></script>
</head>
<body>
<h1>DropDown Menu</h1>
<div id="menuButton" >Menu Button</div>
<div>
<ul id="dropdown">
<li>
<a href=""></a>Home</a>
</li>
<li>
<a href=""></a>Services</a>
</li>
<li>
<a href=""></a>About</a>
</li>
<li>
<a href=""></a>Contact</a>
</li>
<li>
<a href=""></a>Partners</a>
</li>
</ul>
</div>

</body>
</html>

相关内容

最新更新

热门标签：