slideToggle無法使用.sibling方法

Question

我想在單擊標題時顯示隱藏的div。 我選擇了jQuery使用slideToggle做到這一點。 我將設置為具有“ clicker-2”類，而div是具有“內容”的類“ skill-talk_holder”，設置為被CSS隱藏。 有多個div，其類別為“ skill-talk_holder”，因此我必須使用一次只能打開一個的東西，而單擊“ clicker-2”時並不能全部打開。

但是，唯一發生的是頁面重新加載（只需轉到頂部，而不使用新的HTTP req）。

這是我的代碼：

<script type="text/javascript">
$(document).ready(function() {
    $('.clicker-2').click(function() {
        $(this).siblings('div').slideToggle("slow");
    });
});
</script>           

和HTML

<div class="divider">
    <a href="#" class="clicker-2"><h3 class="title">Non-Coding Web Skills</h3></a>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
    content content content
</div>

Answer 1

根據您的評論，您可以使用.nextAll()

 $(document).ready(function() { $('.clicker-2').click(function(event) { event.preventDefault(); $('.skill-talk_holder').slideUp('slow'); $(this).parent().nextAll('.skill-talk_holder:eq(0)').slideToggle('slow'); }); }); 

 .skill-talk_holder { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="divider"> <a href="#" class="clicker-2"><h3 class="title">Non-Coding Web Skills</h3></a> </div> <span class="spacer"></span> <div class="skill-talk_holder"> content content content </div> <div class="divider"> <a href="#" class="clicker-2"><h3 class="title">Non-Coding Web Skills</h3></a> </div> <span class="spacer"></span> <div class="skill-talk_holder"> content content content </div> <div class="divider"> <a href="#" class="clicker-2"><h3 class="title">Non-Coding Web Skills</h3></a> </div> <span class="spacer"></span> <div class="skill-talk_holder"> content content content </div> 

Answer 2

它只是缺少父選擇器：

$(this).parents('.divider:first').siblings('div').slideToggle("slow");