2014-09-12 45 views
0

我需要显示和隐藏第二个TR单击第一个TR中存在的DropDown按钮“DropDown-AA”。打开引导DropDown在另一个TR内TD> TD

我实际上是在寻找一种以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> 
+0

,做你的意思是通过归档?你的意思是实现? – 2014-09-12 12:57:19

+0

:)这是一个错字@TolgaEvcimen。它实际上是“达到” – Syed 2014-09-12 13:00:11

回答

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> 
+0

认为简单,我建议:) – 2014-09-12 12:54:35