jquery slideToggle循環divs獨立

我在jQuery中使用div創建循環時遇到了我的slideToggle函數問題。當我按下其中一個按鈕時，我希望它顯示相應的div，而不是所有按鈕下的所有div。jquery slideToggle循環divs獨立

這是我的CSS：

<style> 
    .toggle { display:none;} 
    p { width:400px; } 
</style>

這是我使用按鈕和DIV

<?php 
include('sql.php'); 

$i = 0; 
while ($i < count($rows)) { 
echo " 
<button class='trigger'> 
<table width='100%'> 
<tr> 
<td width='20%'><img src='http://localhost/app-side/Icons/beer_icon.png' /></td> 
<td width='80%'><h2>{$rows[$i]['titel']} </h2></td> 

</tr> 
</table> 
</button><br> 

<div class='toggle'> 

<p> 
    {$rows[$i]['info']} 
</p> 
</div>"; 


$i++; 
} 
?>

這裏是我的slideToggle函數循環

<script> 


    $('.trigger').click(function(){ 
    $('.toggle').slideToggle('fast'); 

    }); 

</script>

預先感謝您。

來源

2013-04-30 Alex.M.K

最簡單的解決方案可能會包裹在進一步DIV整個循環HTML，然後修改您的jQuery像這樣：

$('.trigger').click(function() { 
    $(this).siblings('.toggle').slideToggle('fast'); 
});

由於兩個元素現在共同的父內分組，一個能找到另一個使用siblings-方法。當然，你可以通過幾百種方式來解決這個問題，但是這一個讓我覺得它是最快最簡單的。

這裏有一個小提琴：http://jsfiddle.net/QukC8/

來源

2013-04-30 09:20:55

我已經試過這和現在的按鈕不顯示任何的div的。它會讓我的思想崩潰，因爲它看起來可以在你的例子中起作用，但是當div創建在循環中時，它似乎不能以這種方式工作。 – 2013-04-30 09:43:32

檢查您生成的HTML，並確保生成的HTML與期望值相等。 – 2013-04-30 09:57:27

好吧，我從jsfiddle中拿出了這個例子，並從頭開始。它現在作爲一種魅力！非常感謝。 – 2013-04-30 10:23:06

jquery slideToggle循環divs獨立

回答

相關問題