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并使用切换来切换它或只是使用。 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

Jquery slideToggle特别div

1 个答案: