0

Javascript と JQuery にはかなり慣れていないため、知識が不足していることをあらかじめお詫びします。そうは言っても、複数のトピックとサブトピックへのナビゲーション メニューを備えたページを作成しようとしています。ユーザーがトピックをクリックすると、スライド式のドロップダウン リストにサブページが表示されるようにしたいと考えています。スライダーは正常に動作していますが、クリックしてスライドすると、すべてのメニューがスライドします。これは、それらがすべて同じクラスを持っているためであることを知っているので、クリックしたいスライドをさらに特定する方法を見つけようとしています. CSS 設計のために、それらをすべて同じクラスにしておくことをお勧めします。私が考えることができる唯一の他のオプションは、個々の ID ごとに Jquery を書き出すことです。それはできますが、かなり時間がかかるので、それを回避する方法を見つけたいと思っています。私に何ができるか知っている人はいますか？

$(document).ready(function(){
    $(".main").click(function(){
        $(".sub").slideToggle("slow");
    });
});

そして私のHTML：

<ul class="sidenav">
<li><img src="images/list_plus.png" width="25px" height="25px" class="main" id="intro" /><a href="index.php">Introduction</a>
    <ul class="sub" id="intro">
        <li>Purpose</li>
        <li>Such and such blah blah.</li>
    </ul>
</li>
<li><img src="images/list_plus.png" width="25px" height="25px" class="main" id="geo" /><a href="geography.php">Geography</a>
    <ul class="sub" id="geo">
    <li>What it is</li>
    <li>How it is has changed</li>
    </ul>
</li>
</ul>
4

2 に答える 2

0

sub同じ 内で要素をスライドする必要がありますli。

$(document).ready(function(){
    $(".main").click(function(){
        $(this).closest('li').find('.sub').slideToggle("slow");
    });
});

デモ:フィドル

于 2013-04-26T17:48:12.783 に答える
0

これを試して ：

$(document).ready(function(){
    $(".main").click(function(e){
        e.preventDefault();
        $(e.currentTarget).parent().children('.sub').slideToggle("slow");
    });
});

e.currentTargetはクリックした要素を参照し、関連する を検索します.sub。

これがフィドルです：http://jsfiddle.net/rBUDa/

于 2013-04-26T19:12:52.813 に答える