Fatal编程技术网
  • javascript/
  • Javascript 由于某些原因，我的.click方法无法使用<；div id=menuButton>；。为什么？

Javascript 由于某些原因，我的.click方法无法使用<；div id=menuButton>；。为什么？

javascript jquery html css

Javascript 由于某些原因，我的.click方法无法使用<；div id=menuButton>；。为什么？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是我的html下拉菜单。最初，在CSS中显示菜单：none <!doctype html> <html> <head> <title>DropDown Menu</title> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="style.css"> </head> &l

这是我的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不起作用。但是，如果我在div中添加一个id=menuButton的
标记，它就可以正常工作。谁能帮我一下吗？我已经挣扎了一段时间。

检查一下，我已经纠正了您标记中的一些问题，例如

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

主页
到
您的代码工作正常，否则

代码中存在一些问题：

1。等待DOM

问题是您的脚本可能是在DOM准备就绪之前执行的。您应仅在文档准备就绪后触发脚本，即：

$(document).ready(function() {
    $( "#menuButton" ).click(function() {
        $( "#dropdown" ).slideToggle();
    });
});
否则，您将尝试向尚未存在的菜单按钮添加单击处理程序

2。修复
主页
应成为：

<a href="">Home</a>
对其他锚定标记也进行同样的修复。

除了HTML中的标记问题之外，您的代码运行良好，正如我通过JSFIDLE检查的一样

js

css


下拉菜单
下拉菜单
菜单按钮

    

  • 
家

    • 

  • 
服务

    • 

  • 
关于

    • 

  • 
接触

    • 

  • 
合作伙伴

    •
？根据，我们可以简单地编写$（函数（）{…}）；这是一个用于书写整个文档的速记版本。准备好了吗？那么，我可以假设这是我的电脑的问题吗？因为它在我的chrome或firefox上不起作用。此外，可能是因为我使用的是较旧的jQuery LiLibrary吗？@ShravanNiranjan您是否可以尝试从CDN而不是使用本地的jQuery来提供服务。 
$(document).ready(function() {
    $( "#menuButton" ).click(function() {
        $( "#dropdown" ).slideToggle();
    });
});

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

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

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

#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>