slideToggle 不适合我

Question

我正在尝试制作一个左侧导航，当您单击其中一个链接时，该导航会随着子类别向下滑动。

我只对顶部链接有效，但其他链接无效。

在我的头文件中，我有一些这样的 jquery 脚本：

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

在我的 HTML/PHP 中，我有以下代码：

    <div id="left-prod-nav">
        <ul>
            <li class="top">Product Categories</li>
            <?for($i = 0; $i < $count; $i++) 
            {?> 
            <div id="flip"><li><img src="images/arrowright_off.gif" style="padding:0px; margin:0px;float:right;"><a href="#"><?=$result[$i]['categoryName']?></a></li> </div>
            <div id="panel">Hello world!</div>
            <?}?>
        </ul>
        <div class="clear">&nbsp;</div>
    </div>

所以导航就在那里......当我点击最上面的一个时，其他的会向下滑动，这样你就可以看到我点击的那个的子类别。

但是，如果我单击其他任何一个，都不会发生任何事情。

以前有没有人遇到过这个问题或知道如何查看我的代码来解决它？

谢谢

Answer 1

我可以假设你正在尝试完成这样的事情：http://jsfiddle.net/QQRy8/

$(".flip").click(function(){
    $(this).next(".panel").slideToggle("slow");
});

我改变了你的 jQuery 以使用类，你应该改变你的 PHP 给每个 div 一个类名而不是一个 ID（ID 必须是唯一的！）

此答案基于此 HTML：

<div class="flip">
    <li>
        <a href="#">cool</a>
    </li> 
</div>

<div class="panel" style="display: none;">Hello world!</div>