Question

我需要点击DropDown按钮显示和隐藏第二个TR＆＃34; DropDown-AA＆＃34;它出现在First TR。

我实际上正在寻找以Bootstrap方式实现的代码。对于Eg。 .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>

打开另一个TR＆gt; TD内的Bootstrap DropDown

1 个答案: