Question

当我使用循环中创建的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>

提前谢谢。

Answer 1

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

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

由于现在将两个元素分组到一个公共父级中，因此可以使用siblings - 方法找到另一个元素。当然，你可以通过数百种方式解决这个问题，但这一点让我感到最快，最容易。

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

jquery slideToggle独立循环div

1 个答案: