javascript - JQuery Slide 切换关闭和打开问题

Question

首先，请容忍我的英语不好:(

我使用 for-each 循环在表中列出数据，如果使用 slipToggle，则会生成上面的 HTML，然后它可以正常打开。 但如果另一行打开，然后最后一行仍然打开，我想打开一个新行但关闭前一行。

function view_history_details  (  ) {

    $('#view-details').slideToggle();
}

<table>
    <tr>
      <td>
        <a href="javascript:;"  onclick="view_history_details()" title="View" data-keyboard="false" ></a>
      </td>
    </tr>
    <tr style="display:none" class="view-details">
    some text
    </tr>

    <tr>
      <td>
        <a href="javascript:;"  onclick="view_history_details()" title="View" data-keyboard="false" ></a>
      </td>
    </tr>
    <tr style="display:none" class="view-details">
    some text
    </tr>

    <tr>
      <td>
        <a href="javascript:;"  onclick="view_history_details()" title="View" data-keyboard="false" ></a>
      </td>
    </tr>
    <tr style="display:none" class="view-details">
    some text
    </tr>
</table>

Answer 1

您可以使用 jQuery 事件处理程序重新设计解决方案，如下所示。

我们向触发操作的 anchor 元素添加一个类，然后使用该类来注册点击处理程序。在处理程序内，我们切换下一个 view-details 行并隐藏所有其他 view-details 元素

jQuery(function($) {
  $('.toggle').click(function(e) {
    console.log(this)
    e.preventDefault();
    var $cur = $(this).closest('tr').next('.view-details').stop().toggle();
    $('.view-details').not($cur).stop().hide();
  })
})

.toggle {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href="#" class="toggle" title="View" data-keyboard="false">togggle</a>
    </td>
  </tr>
  <tr style="display:none" class="view-details">
    <td>some text</td>
  </tr>
  <tr>
    <td>
      <a href="#" class="toggle" title="View" data-keyboard="false">togggle</a>
    </td>
  </tr>
  <tr style="display:none" class="view-details">
    <td>some text</td>
  </tr>
  <tr>
    <td>
      <a href="#" class="toggle" title="View" data-keyboard="false">togggle</a>
    </td>
  </tr>
  <tr style="display:none" class="view-details">
    <td>some text</td>
  </tr>
</table>