的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