1

リンクのいずれかをクリックすると、サブカテゴリがスライドダウンする左側のナビゲーションを作成しようとしています。

トップリンクのみで機能するようになりましたが、他のリンクは機能しません。

私のヘッダー ファイルには、次のような 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>

ナビゲーションがあります...一番上のものをクリックすると、他のカテゴリが下にスライドして、クリックしたカテゴリのサブカテゴリが表示されます。

ただし、他のいずれかをクリックしても何も起こりません。

誰かが以前にこの問題を抱えていた、または私のコードを見て解決する方法を知っていますか?

ありがとう

4

1 に答える 1

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>
于 2013-05-03T14:48:38.513 に答える