Question

我正在尝试制作两个div，当点击一个时，它会隐藏另一个。这是我的代码：

<head>

    <script src="jquery-1.9.1.min.js"></script>
    <script>
        $("#top").click(function {
            $("#box").toggle();
        })
    </script>

</head>
<body>

    <div id="top"></div>
    <div id="box"></div>

</body>

但是当我点击top时，没有任何反应。

编辑：我将其更改为：

$(document).ready(function(){
    $("#top").click(function {
        $("#box").toggle();
    })
});

并且它仍然无效

Edit2：原来我在点击（功能）中缺少括号

Answer 1

你错过了功能后的括号。我认为你需要放入document.ready，以便元素在被javasscript访问之前就已准备就绪。

$("#top").click(function (){
                         ^^

<强> Live Demo

$(document).ready(function(){
  $("#top").click(function (){
        $("#box").toggle();
    });
});

Answer 2

您缺少括号

$("#top").click(function() {
                        ^^

由于jQuery位于HTML之上，因此它需要将jQuery包装在 document.ready 包装器中，例如：

$(function(){
    // your code
});

或者，将jQuery脚本标记移动到HTML下面，例如：

<div id="top">one</div>
<div id="box">two</div>
<script>
    $("#top").click(function() {
        $("#box").toggle();
    })
</script>

Answer 3

您需要将代码放在document.ready

中

$(document).ready(function() {
   // do stuff when DOM is ready
 });

了解jquery-getting started here。

Answer 4

这是可以工作的写代码。

$(document).ready(function(){
  $('#top').click(function(){
     $("#box").toggle(500);
  });
});

您可以在此处查看示例http://jsfiddle.net/deepp2887/Pnamj/。您可以根据需要更改.toggle（500）动画速度。

jQuery切换div不起作用

4 个答案: