javascript - 出于某种原因,我的 .click 方法不适用于 <div id=menuButton>。为什么?

标签 javascript jquery html css

这是我的下拉菜单 html。最初,在 CSS 中显示菜单:无; .

<!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 中添加一个 <p>带有 id= menuButton 的标签,它工作得很好。谁能帮我解决这个问题?我已经挣扎了一段时间。

最佳答案

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

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

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

否则你的代码工作正常

关于javascript - 出于某种原因,我的 .click 方法不适用于 <div id=menuButton>。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34940799/

相关文章:

javascript - 在 AJAX 请求中重定向到登录页面

除非光标重新进入元素,否则不会检测到带有 live() 的 JQuery 鼠标悬停

javascript - 如何使用 jquery 进行同步 json ajax 调用

javascript - 多个存储元素 .css()

css - 如何使用CSS调整HTML5验证指标

javascript - 将 angularjs $scope 对象视为 html

javascript - 查询 :invalid regular expression

javascript - 更改可拖动属性

html - div 真的可以为布局上的所有内容覆盖表格吗?

javascript - XMLHttpRequest:网络错误 0x2efd,由于错误 00002efd,无法完成操作