1

当我使用在循环中创建的 div 时，我在 jquery 中的 slideToggle 函数出现问题。当我按下其中一个按钮时，我希望它显示相应的 div 而不是所有按钮下方的所有 div。

这是我的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>

先感谢您。

4

1 回答 1

1

最简单的解决方案可能是将整个循环 html 包装在另一个 div 中，然后像这样修改 jQuery：

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

由于这两个元素现在分组在一个共同的父元素中，因此可以使用 - 方法找到另一个元素siblings。当然，您可以通过数百种方法来解决此问题，但我认为这是最快和最简单的一种。

这是一个小提琴：http: //jsfiddle.net/QukC8/

于 2013-04-30T09:20:55.430 回答