2014-09-12 56 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