0

私は3つの深いULリストを持っています。一番上の UL をクリックすると、2 番目の UL だけが表示されます。次に、2 番目の UL をクリックすると、3 番目の UL が表示されます。最初の ul をクリックすると、その下にあるすべての ul が表示されます。これを正しく機能させるにはどうすればよいですか？

コード：

jQuery(document).ready(function () {
  jQuery('.list-year').addClass('list-year-left');
  jQuery('.list-year').on('click',(function() { 
    jQuery('.list-year').toggleClass('list-year-down');
    jQuery('.list-month').toggle();  
  }));

});

私は js フィドル リンクを持っています : http://jsfiddle.net/7xbjr/4/

4

3 に答える 3

0

のクラスは<li>ですが、どちらが一致しないlist-postかを定義しています。list-posts

.list-posts {
  display: none;
}

なるはず

.list-post {
  display: none;
}

さらに、クリック イベントは の<li>代わりに要素にバインドする必要があります<ul>。子要素でクリック イベントをバインドしている場合は、イベントの伝達を停止することをお勧めします。そうしないと、クリック イベントが親のクリック イベントに伝達されます。

ここにJavaScriptがあります

jQuery(document).ready(function () {
    jQuery('.list-year').addClass('list-year-left');
    jQuery('.list-year > li').on('click', function() { 
        jQuery('.list-year').toggleClass('list-year-down');
        jQuery('.list-month').toggle(); 
    });

    jQuery('.list-month > li').on('click',function(e) {
        e.stopPropagation(); // add this for avoiding click event propagate to parent 
        jQuery('.list-post').toggle(); 
    });
});

jsFiddle : http://jsfiddle.net/BMc43/2/

于 2013-03-03T14:14:27.067 に答える
0

あなたのコードはもっときちんとしているかもしれませんが、ここではhttp://jsfiddle.net/BMc43/3/に行きます:

jQuery(document).ready(function () {
    jQuery('.list-year').addClass('list-year-left');
    jQuery('.list-year').on('click',(function() { 
        jQuery('.list-year').toggleClass('list-year-down');
        jQuery('.list-month').toggle(); 
    }));

    jQuery('.list-month').on('click',(function(e) {
        e.stopPropagation();
        jQuery('.list-post').toggle(); 
    }));
});

そしてもちろん、Derek が言ったように、CSSに変更.list-postsする必要があります。.list-post

于 2013-03-03T14:14:35.830 に答える
0

以下の点が間違っていました。

  • クラスの list-post があり、それを list-posts と呼んでいました。
  • 子ノードをクリックするたびにクリックイベントが発生し、トグルが再度トリガーされてメニューが閉じます。
  • 第 3 レベルのメニューに追加のクリック イベントを追加する必要がありました

http://jsfiddle.net/7xbjr/5/ ここに動作する更新されたフィドルがあります

jQuery(document).ready(function () {
 jQuery('.list-year').addClass('list-year-left');
  jQuery('.list-year > li').on('click',function() { 
    jQuery('.list-year').toggleClass('list-year-down');
    jQuery('.list-month').toggle();  
  });
  jQuery('.list-month > li').on('click',function() { 
    jQuery('.list-post').toggle();  
  });
});
于 2013-03-03T14:16:44.733 に答える