2011-02-07 60 views
0

我想隱藏一個內部表與JQuery,觸發隱藏的元素在父表中。這裏是我的代碼:用jQuery隱藏內表

<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
$(function() { 
    $(".collapsible").click(function(event) { 

     event.preventDefault(); 

     inner = $(this).find(".inner"); 



     if($(inner).is(":visible") == true) { 

      alert("hiding"); 

      $(inner).hide("slow"); 

     } 

     else { 

      alert("showing"); 

      $(inner).show("slow"); 

     } 

    }); 

    $(".inner").each(function(index, element) { 

     $(this).hide(0); 

    }); 
}); 
</script> 

<table class='outer'> 
<tr><td><a class='collapsible' href='#'>click here</a></td></tr> 
<tr><table class='inner'> 
<tr><td>thing</td></tr><tr><td>another thing</td></tr> 
</table> 
</table> 
<table class='outer'> 
<tr><td><a class='collapsible' href='#'>click here</a></td></tr> 
<tr><table class='inner'> 
<tr><td>something else</td></tr><tr><td>another something else</td></tr> 
</table> 
</table> 
</body> 
</html> 

有沒有人知道爲什麼點擊「點擊這裏」不讓內表顯示?在此先感謝

+0

合併帳戶;請考慮註冊! – Will 2011-02-07 22:16:22

回答

0

因爲.find()正在尋找.collapsible錨。你需要加緊父表首先正確地使用.find()

$(this).closest("table.outer").find("table.inner"); 

你的整個代碼可以簡化爲:

$(function() { 
    $(".collapsible").click(function(event) { 
     event.preventDefault(); 
     $(this).closest("table.outer").find("table.inner").toggle('slow'); 
    }); 

    $(".inner").hide(); 
}); 
+0

我仍然沒有得到表格來添加我的代碼。我寫了另一種方法試圖切換隱藏的內部表,但它也不起作用。 – GotSomeQuestions 2011-02-07 02:38:50