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”来隐藏带有 class=subsection 的 div

但我无法将特定行的按钮与其相应的小节链接....

我如何正确使用 this 关键字并针对给定行定位按钮的子部分...

非常感谢....

问候

Answer 1

像这样？

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

使用.closest() 获取每个小节的根父级和按钮父级，即.card，使用find 获取subsection 并使用toggle 切换它或仅使用.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