Question

以下示例有效。（例子来自w3cschools，并且有点被黑了。）单击DIV中的任何位置将导致地址类div消失。但是，将脚本的第三行更改为

$("button").click(function(){

而不是“div”，它只是像纸镇一样坐在那里。我错过了什么。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").click(function(){
    $(this).children(".address").toggle("slow");

  });
});
</script>
<style type="text/css"> 
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>

<h3>Island Trading</h3>
<div class=ex>
    <button>Hide me</button>
  <div class=address>
    <p>Contact: Helen Bennett<br> 
    Garden House Crowther Way<br>
    London</p>
  </div>
</div>

<h3>Paris spécialités</h3>
<div class=ex>
<button class="hide">Hide me</button>
<div class=address>
<p>Contact: Marie Bertrand<br> 
265, Boulevard Charonne<br>
Paris</p>
</div>
</div>

</body>
</html>

Answer 1

更改

$(this).children(".address").toggle("slow");

类似于：

$('.address').toggle("slow");

OR

$(this).siblings(".address").toggle("slow");

一旦你使监听器对button元素采取行动，.address就不再是按钮的子节点了。这是一个兄弟姐妹。如果您的网页上有多个.address课程，则必须使用兄弟姐妹。

http://jsfiddle.net/9S722/1/

Answer 2

试试这个：

$("button").on("click", function(){
    $(this).parent().children(".address").toggle("slow");
});

http://jsfiddle.net/hescano/9S722/

Answer 3

$(this).parent().children(".address").toggle("slow");

按钮没有孩子

Answer 4

$("div").click(function(){
    $(this).children(".address").toggle("slow");
});

上述代码的含义是，当在div容器中单击触发器时，它将通过其子代码来匹配“地址”类属性。

但是，如果您只是将$（“div”）更改为$（“button”），但按钮元素中不会显示子项。没有匹配的切换功能，只需忽略它。

您应该将代码更改为：

$("button").click(function () {
    $(this).next(".address").toggle("slow");
});

找到按钮元素的下一个兄弟。那是你想要的元素。

JQuery（“按钮”）。单击不起作用

4 个答案: