遍历DOM以仅选择

Question

我使用Drupal 7为单个页面生成内容类型。我有一些jQuery设置在每个摘要文本上附加一个按钮。我隐藏了正文。单击附加按钮时，我尝试仅选择最近的.hidden类，并在单击“继续”按钮时展开它。理想情况下，也可以在点击时隐藏摘要文本。我试过.find（）.closest（）没有任何运气。

＆＃13;

＆＃13;

var slideBodyText = $('.featured-summary').append('<button class="continue btn btn-success">Continue</button>');

slideBodyText;
$('.continue').on('click',function(){
  $('.hidden').find('div.hidden').toggleClass('.hidden');
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="field-content">
    <div class="featured-summary">
      <p>show text initially, then hide on click of button</p>
    </div>
    <div class="hidden">
      <div>
        <p>hidden text until botton is pressed.</p>
      </div>
    </div>
  </div>

  <div class="field-content">
    <div class="featured-summary">
      <p>show text initially, then hide on click of button/p>
    </div>
    <div class="hidden">
      <div>
        <p>hidden text until botton is pressed.</p>
      </div>
    </div>
  </div>

  <div class="field-content">
    <div class="featured-summary">
      <p>show text initially, then hide on click of button</p>
    </div>
    <div class="hidden">
      <div>
        <p>hidden text until botton is pressed.</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

任何帮助都会很棒。谢谢。

Answer 1

选择公共父级，找到隐藏在那里，然后切换类。此外，使用toggleClass，addClass或removeClass时，您不会添加前导.

var slideBodyText = $('.featured-summary').append('<button class="continue btn btn-success">Continue</button>');

slideBodyText;
$('.continue').on('click', function() {
  $(this).closest('.field-content').find('div.hidden').toggleClass('hidden');
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="field-content">
    <div class="featured-summary">
      <p>show text initially, then hide on click of button</p>
    </div>
    <div class="hidden">
      <div>
        <p>hidden text until botton is pressed.</p>
      </div>
    </div>
  </div>

  <div class="field-content">
    <div class="featured-summary">
      <p>show text initially, then hide on click of button/p>
    </div>
    <div class="hidden">
      <div>
        <p>hidden text until botton is pressed.</p>
      </div>
    </div>
  </div>

  <div class="field-content">
    <div class="featured-summary">
      <p>show text initially, then hide on click of button</p>
    </div>
    <div class="hidden">
      <div>
        <p>hidden text until botton is pressed.</p>
      </div>
    </div>
  </div>
</div>