如何使用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_的所有內容？

回答

相關問題