javascript - 打开另一个 TR>TD 中的 Bootstrap DropDown

Question

我需要通过单击第一个 TR 中存在的下拉按钮“DropDown-AA”来显示和隐藏第二个 TR。

我实际上正在寻找以 Bootstrap 方式实现的代码。对于例如。 .trigger('click.bs.dropdown');

<tr>
  <td class="dropdown">
    <a class="btn btn-link dropdown-toggle" data-toggle="dropdown">DropDown-AAA</a>
  </td>

  <td>&nbsp;</td>

  <td class="action-btns dropdown">
    <a href="#" data-toggle="dropdown" class="btn btn-link">DropDown-BBB</a>
    <ul class="dropdown-menu">
      <li><a href="#">Item of BBB</a></li>
      <li><a href="#">Item of BBB</a></li>
    </ul>
  </td>
</tr>

<!--I need to show and hide this below 'TR' when DropDown-AAA is clicked-->
<tr>
  <td colspan="3">
    <ul class="dropdown-menu">
      <li><a href="#">Item of AAA</a></li>
      <li><a href="#">Item of AAA</a></li>
    </ul>
  </td>
</tr>

Answer 1

提供您的 TR 的 ID。如果你能用其他方法得到它们也很好。

<tr id="firstTR">
  <td class="dropdown">
    <a class="btn btn-link dropdown-toggle" data-toggle="dropdown">DropDown-AAA</a>
  </td>

  <td>&nbsp;</td>

  <td class="action-btns dropdown">
    <a href="#" data-toggle="dropdown" class="btn btn-link">DropDown-BBB</a>
    <ul class="dropdown-menu">
      <li><a href="#">Item of BBB</a></li>
      <li><a href="#">Item of BBB</a></li>
    </ul>
  </td>
</tr>

<!--I need to show and hide this below 'TR' when DropDown-AAA is clicked-->
<tr id="secondTR">
  <td colspan="3">
    <ul class="dropdown-menu">
      <li><a href="#">Item of AAA</a></li>
      <li><a href="#">Item of AAA</a></li>
    </ul>
  </td>
</tr>

并放置这个小脚本:

<script>
    $("#firstTR").on("click", function(){
        if( $("#secondTR").css("display") == "none" ){
            $("#secondTR").show();
        } else {
            $("#secondTR").hide();
        }
    }
</script>