如何使用jQuery slideDown（）显示_almost_的所有内容？

我有一个div内的div。在页面加载时，它们都应该隐藏，然后当我在外部div上触发slideDown()函数时，我希望内部div保持隐藏状态。我怎样才能做到这一点？如何使用jQuery slideDown（）显示_almost_的所有内容？

<script> 
$(function(){ 
    $('.body').hide(); 
    $('.display').click(function(){ 
     $(this).closest('.wrapper').find('.body').slideDown(); 
    }); 
}); 
</script> 

<div class="wrapper"> 
    <a class="display" href="#">Display Outer</a> 
    <div class="body"> 
     Now displaying outer div 
     <div class="wrapper"> 
      <a class="display" href="#">Display Inner</a> 
      <div class="body"> 
       Now displaying inner div 
      </div> 
     </div> 
    </div> 
</div>

这里是它不工作的例子：http://jsfiddle.net/b7Tpt/

来源

2011-09-27 Andrew

我不明白，有什么问题。你的代码工作.. – yzk

同样的事情在这里，你的代码工作得很好... – klaffenboeck

你的代码似乎工作 - http://jsfiddle.net/kddrT/。当显示外部div时，内部div仍然隐藏 – ipr101

它不工作的原因是使用的find。 find将穿越所有级别以找到匹配，而children将穿越单级。因此，使用find('.body:first')或儿童

$(function(){ 
    $('.body').hide(); 
    $('.display').click(function(){ 
     $(this).closest('.wrapper').find('.body:first').slideDown(); 
    }); 
});

Updated Example

$(function(){ 
    $('.body').hide(); 
    $('.display').click(function(){ 
     $(this).closest('.wrapper').children('.body').slideDown(); 
    }); 
});

Updated Example

来源

2011-09-27 19:50:03

啊，'find（）'和'children（）'之间的区别是关键。还有一点很重要，那就是“children（）”只能进行一级深度的处理，因此需要更新二级深度的选择器。 – Andrew

试试这个（ '身上。'）：http://jsfiddle.net/Kf6gk/

来源

2011-09-27 19:52:49 yzk

尝试 -

$('.display').click(function(){ 
    $(this).siblings('.body').slideDown(); 
});

我觉得$(this).closest('.wrapper')在动了DOM树，并找到最顶端的wrapper DIV然后打开所有的body类才发现下面。使用siblings应该得到具有body类的元素，该元素直接位于点击链接的下方。

演示 - http://jsfiddle.net/pMgVj/1/

来源

2011-09-27 19:53:19 ipr101

如何使用jQuery slideDown（）显示_almost_的所有内容？

回答

相关问题