單的slideToggle（）用於相同的元素

Question

我有這樣的HTML代碼：

<div> 
    <div> 
     <button class="btn-slide"><span class="fa fa-caret-down" aria-hidden="true"></span></button> 
    </div> 
    <div class="block"> 
    ... 
    </div> 
</div> 

而且我已經在我的論壇模板幾個這樣的元素。我使用標準的js切換（）腳本：

$(document).ready(function() { 
    $('btn-slide').click(function() { 
     $('.block').slideToggle(50); 
    }); 
}); 

當我點擊按鈕，所有的組件顯示或隱藏，但我想隱藏/顯示只有這個因素，我選擇。我認爲我可以在第3行使用$（this）.childern，但是如果看到.block不是btn-slide childern。那麼我怎麼能達到我想要的呢？

Answer 1

您可以使用parents()next()

$(document).ready(function() { 
 
    $('.btn-slide').click(function() { 
 
    $(this) 
 
     // get all div in parent level 
 
     .parents('div') 
 
     // get immediate sibling with class block after the element 
 
     .next('.block') 
 
     .slideToggle(50); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <div> 
 
    <button class="btn-slide"><span class="fa fa-caret-down" aria-hidden="true"></span> 
 
    </button> 
 
    </div> 
 
    <div class="block"> 
 
    ... 
 
    </div> 
 
</div> 
 

 
<div> 
 
    <div> 
 
    <div> 
 
     <div> 
 
     <button class="btn-slide"> 
 
      <span class="fa fa-caret-down" aria-hidden="true"></span> 
 
     </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="block"> 
 
    ... 
 
    </div> 
 
</div>

Answer 2

變化與此

$(document).ready(function() { 
    $('.btn-slide').click(function() { 
    $(this.nextSibling.parentNode.nextElementSibling).slideToggle(50); 
    }); 
}); 

Answer 3

如果可能的話你的JS，你可以另一種獨特的類添加到block like block-new並使用切換事件到該類。

$(document).ready(function() { 
    $('.btn-slide').click(function() { 
     $('.block-new').slideToggle(50); 
    }); 
}); 

的jsfiddle - https://jsfiddle.net/dhananjaymane11/t7reu8d1/1/