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（）將其隱藏。

演示版

使用文本切換黑白顯示/隱藏

$('.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";
    })
});

演示版