Question

我想点击一个div让他的孩子出现。问题是我有一长串的那些div。每个div都有一个孩子。在下面，我想点击div＆＃34;礼仪＆＃34;显示或隐藏他的孩子div＆＃34; detail＆＃34;。

<div class="etiquette">
  <span class="date">13-07</span>
  <span class="titre">LOREM IPSUM 1</span>
     <div class="detail"><p>lorem ipsum 1</p></div>
</div>
<div class="etiquette">
  <span class="date">14-07</span>
  <span class="titre">LOREM IPSUM 2</span>
     <div class="detail"><p>lorem ipsum 2</p></div>
</div>
<div class="etiquette">
  <span class="date">14-07</span>
  <span class="titre">LOREM IPSUM 3</span>
     <div class="detail"><p>lorem ipsum 3</p></div>
</div>

我想使用的脚本是：

$(document).ready(function() {
    $(".etiquette").children(".detail").css("display", "none");
    $(this).toggle(function() {
        alert("clicked");
        $(this).children("div.detail").css("display", "block");
    }, function() {
        alert("clicked again");
        $(this).children("div.detail").css("display", "none");
    });
});

以下效果很好：

$(this).toggle(function() {
    alert("clicked");
});

以下也很有效。但它显示或隐藏所有div＆＃34; detail＆＃34;而且不仅是点击的div的孩子：

$(this).toggle(function() {
    alert("clicked");
    $(".etiquette").children("div.detail").css("display", "block");
}, function() {
    alert("clicked again");
    $(".etiquette").children("div.detail").css("display", "none");
});
});

我做错了什么？在此先感谢您的帮助。

Answer 1

你的$（this）指向我自己的文件。

试试这个，

$(document).ready(function() {
  $(".etiquette").children(".detail").css("display", "none");
  $(".etiquette").click(function(){
    $(this).children("div.detail").toggle();
  });
});

我没有测试代码。希望它能奏效。

Answer 2

$(".etiquette").children(".detail").css("display", "none");
$('.etiquette').click(function() {
    $(this).find('.detail').toggle();
});

<强> jsFiddle example

关于你的代码有什么问题还有很多东西，但是如果你看一下这个例子，你会看到它的作用。第一行隐藏了具有类detail的所有元素，这些元素是具有类etiquette的元素的子元素（您有，我保持不变）。下一个代码块将click事件绑定到具有类etiquette的元素，并使用detail类切换子元素的显示。

Answer 3

改变这个：

$(this).toggle(function() {

为：

$('.etiquette').toggle(function() {

此this引用document对象而不是.etiquette元素。

note: as of jQuery 1.7 using toggle mouse event has been deprecated.

http://jsfiddle.net/f9BcB/

Answer 4

您是否尝试使用.each函数将切换函数绑定到每个div？

例如：

$('.etiquette').each(function(){
  $(this).click(function(){
    //Enter toggle function here
  });
});

$（这）似乎没有正常工作

4 个答案: