的Jquery的slideToggle特定的div

Question

尊敬的脂肪酶...

這是我的標記：

<div class="row-fluid"> 
    <div class="span12 card card-even"> 
     <div> 
     <h3>Case 1</h3> 
     <a href="" class="hiderBUTTON">Hide the subsection</a> 
     </div> 
     <div class = "timeline"> 
      <div class= "circle circle-green " data-toggle="tooltip" title="Task 2 "> 
      <span></span> 
      </div> 
      <div class="rect-fixed"></div> 
     </div> 
     <div class="subsection"><span>Panther a</span></div> 
    </div> <!-- end of card 1--> 
    </div> 
<div class="row-fluid"> 
    <div class="span12 card card-odd"> 
     <div> 
     <h3>Case 1</h3> 
     <a href="" class="hiderBUTTON">Hide the subsection</a> 
     </div> 
     <div class = "timeline"> 
      <div class= "circle circle-green " data-toggle="tooltip" title="Task 2 "> 
      <span></span> 
      </div> 
      <div class="rect-fixed"></div> 
     </div> 
     <div class="subsection"><span>Panther b</span></div> 
    </div> <!-- end of card 2--> 
    </div> 

我有一個生成多個交替卡（行流體），這是奇/偶帶按鈕的應用程序「hiderBUTTON」隱藏與類的div =第

但是我不能與它對應分部鏈接特定行的按鈕....

我如何使用此關鍵字正確和目標按鈕的第一個給定的行...

非常感謝....

問候

Answer 1

喜歡這個？

$('.hiderBUTTON').click(function(e){ 
    e.preventDefault(); 
    $(this).closest('.card').find('.subsection').toggle(); 
}); 

使用.closest()要在每個小節和按鈕父即.card的根父和使用發現得到subsection和使用切換來切換，或只使用.hide（）來隱藏它。

Demo

隨着文字撥動/黑白顯示/隱藏

$('.hiderBUTTON').click(function (e) { 
    e.preventDefault(); 
    var $this = $(this); 
    $this.closest('.card').find('.subsection').toggle(); 
    $this.text(function(_, text){ 
     return text == "Hide the subsection" ? "Show the subsection" : "Hide the subsection"; 
    }) 
}); 

Demo