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

单击第一个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>

最佳答案

输入您的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>

关于javascript - 打开另一个TR> TD中的Bootstrap DropDown，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25808510/