1

我想点击一个 div 让他的孩子出现。问题是我有一长串这些div。每个 div 都有一个孩子。下面，我要点击div“礼节”来显示或隐藏他的子div“detail”。

<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 “详细信息”，而不仅仅是点击的 div 的孩子：

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

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

4

4 回答 4

1

我猜你的 $(this) 指向文件本身。

试试这个，

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

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

于 2012-07-16T17:11:28.733 回答
0 
$(".etiquette").children(".detail").css("display", "none");
$('.etiquette').click(function() {
    $(this).find('.detail').toggle();
});​

jsFiddle 示例

关于你的代码有什么问题，有太多的内容需要讨论，但是如果你看一下这个例子，你就会明白它做了什么。第一行隐藏了该类的所有元素，这些元素是该类detail元素的子元素etiquette（您拥有该类，我保持不变）。下一个代码块将 click 事件绑定到具有类的元素，etiquette并切换具有类的子元素的显示detail。

于 2012-07-16T17:13:37.957 回答
0

改变这个：

$(this).toggle(function() {

到：

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

thisthis指的是document对象而不是.etiquette元素。

注意：从 jQuery 1.7 开始，使用切换鼠标事件已被弃用。

http://jsfiddle.net/f9BcB/

于 2012-07-16T17:14:24.410 回答
0

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

前任：

$('.etiquette').each(function(){
  $(this).click(function(){
    //Enter toggle function here
  });
});
于 2012-07-16T17:16:53.207 回答