javascript - 单击另一个类时如何删除/添加类？

Question

当类“plus”被点击时，下面显示所有隐藏的行。

默认情况下它们是隐藏的。

当点击特定年份时，如何才能显示该年份的月份。

使用下面的代码，它们在点击后全部显示。

<cfoutput query="getdates" group="year">
  <thead>
    <tr>
      <th> <span class="plus">+</span> #year#</th>
    </tr>
  </thead>
  <cfif dtToday gte combineDates>
    <tbody class="closeAction">
      <cfoutput>
        <tr>
          <td><a href=""> #month#  </a></td>
        </tr>
      </cfoutput>
    </tbody>
  </cfif>
</cfoutput>

<style>
  .closeAction {
    display: none;
  }
</style>

<script>
  $(".plus").click(function() {
    //$('.plus',this).html('-');
    $(".closeAction").removeClass("closeAction");
  })
</script>

这是点击前的样子:

Answer 1

使用 closest() 并在 next() 之后(转到父级，然后使用提供的类名搜索下一个元素)。

另外为什么要注意在 closeAction 之外添加 close 类，然后使用 toggleClass 打开/关闭日期:

这是一个工作 fiddle

和片段

$(".plus").click(function () {
    $(this).closest('thead').next('.closeAction').toggleClass('closed');
})

.closed {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr >
      <th> <span class="plus">+</span> 2015</th>
    </tr>
  </thead>
  <tbody  class="closeAction closed">
    <tr>
      <td><a href="#"> Jan </a></td>
    </tr>
    <tr>
      <td><a href="#"> Feb  </a></td>
    </tr>
    <tr>
      <td><a href="#"> Mar  </a></td>
    </tr>
  <thead>
    <tr >
      <th> <span class="plus">+</span> 2016</th>
    </tr>
  </thead>
  <tbody  class="closeAction closed">
    <tr>
      <td><a href="#"> #month#  </a></td>
    </tr>
    <tr>
      <td><a href="#"> Jan </a></td>
    </tr>
    <tr>
      <td><a href="#"> Feb  </a></td>
    </tr>
    <tr>
      <td><a href="#"> Mar  </a></td>
    </tr>
  <thead>
    <tr >
      <th> <span class="plus">+</span> 2017</th>
    </tr>
  </thead>
  <tbody  class="closeAction closed">
    <tr>
      <td><a href="#"> Jan </a></td>
    </tr>
    <tr>
      <td><a href="#"> Feb  </a></td>
    </tr>
    <tr>
      <td><a href="#"> Mar  </a></td>
    </tr>
  </tbody>
</table>