jQuery slideToggle重疊以前的內容滑動

我試圖使用jQuery slideToggle（）函數來顯示和隱藏表中的一些細節。這個想法是，當我點擊一張桌子的標題行時，我會看到下面的細節。jQuery slideToggle重疊以前的內容滑動

我使用從W3學校代碼，這是原文：
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle

的問題是，滑動格重疊已有的表頭。
看看這裏運行代碼的結果： http://62.219.127.85/sites/isell/tests/123123.php

我爲了得到我現在要點擊標題使用onmouseover()。
這裏是我的代碼（只是我寫的一個例子，不是真實的）

任何人都可以找到這裏有什麼問題嗎？

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 

<style type="text/css"> 
#hideme,#triggerSlide 
{ 
padding:5px; 
text-align:center; 
background-color:#e5eecc; 
border:solid 1px #c3c3c3; 
} 
#hideme 
{ 
padding:50px; 
display:none; 
} 
</style> 

<body> 
<div id="triggerSlide" class="adID" onmouseover="storeAdID(this);" 
style="padding:2px;"> 
    <table border="1"> 
     <tr> 
      <th colspan="2">asdasd</th> 
     </tr> 
    </table> 
</div> 


<div class="adID" id="hideme"> 
    <table border="1"> 
     <tr> 
      <td>123</td> 
      <td>145</td> 
     </tr> 
     <tr> 
      <td>987</td> 
      <td>951</td> 
     </tr> 
    </table> 
</div> 
</body> 

<script> 
    var adID; 

    function storeAdID(obj) { 
     adID = obj.className; 
    } 
</script> 

<script> 
$(document).ready(function(){ 
    $("#triggerSlide").click(function(){ 
    $("."+adID).slideToggle("slow"); 
    }); 
}); 
    </script>

來源

2012-09-17 Daniel Briskman

您有兩個類「adID」的元素，並且您將它們隱藏起來。

這裏是一個的jsfiddle：http://jsfiddle.net/mmcglynn/j6z73/

我覺得你想要的東西更接近這個：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 

<style type="text/css"> 
#hideme,#triggerSlide 
{ 
padding:5px; 
text-align:center; 
background-color:#e5eecc; 
border:solid 1px #c3c3c3; 
} 
#hideme 
{ 
padding:50px; 
display:none; 
} 
</style> 

<body> 
<div id="triggerSlide" style="padding:2px;cursor:pointer"> 
    <table border="1"> 
     <tr> 
      <th colspan="2">asdasd</th> 
     </tr> 
    </table> 
</div> 


<div class="adID" id="hideme"> 
    <table border="1"> 
     <tr> 
      <td>123</td> 
      <td>145</td> 
     </tr> 
     <tr> 
      <td>987</td> 
      <td>951</td> 
     </tr> 
    </table> 
</div> 
</body> 

<script> 
$(document).ready(function(){ 
    $("#triggerSlide").click(function(){ 
    $(".adID").slideToggle("slow"); 
    }); 
}); 
</script>

來源

2012-09-17 20:13:14 mmcglynn

看到的問題......現在，它工作在小例子.. 但我需要它的時候到「現實世界」，它只適用於第一張桌子，但不適用於其他人...... 這裏是完整的代碼：http://codeviewer.org/view/code:29da @mmcglynn，你能請看一下？ –

@DanielBriskman您可以用上面鏈接的代碼示例演示一個小提琴。 – tokyovariable

對不起，但是什麼是小提琴？ :) –

jQuery slideToggle重疊以前的內容滑動

回答

相關問題