0

そのため、3 レベルの深さのネストされたリスト要素を使用して単純なサイドバーを作成しようとしているため、メニュー、サブメニュー、およびサブサブメニューがあります。すべてが期待どおりに機能しているようですが、唯一の問題は、最も深いレベルのリスト要素 (サブサブメニュー) にいて、オプションを選択すると、jquery イベントが何らかの形で競合し、意図せずにメニューが折りたたまれることです。クラス固有のセレクターを使用して、この問題を回避しようとしましたが、成功しませんでした。親リストを折りたたまないように、サブサブメニューをクリックしたいと思います。

また、サブサブメニュー オプションを含むサブメニューが開いているときに、ユーザーが別のサブメニュー オプションを選択すると (現在のサブメニューを非表示にする)、折りたたまれたばかりの最初のサブメニュー オプションに戻ります。 -メニューオプションは、非表示にする必要がある場合でも表示されます。

JQuery

$('.docs-index-li-ul').hide();
$('.doc-index-li > a').click(function(){
    $('.docs-index-li-ul').hide();
    $(this).next('ul').show();
});
$('.doc-index-li .docs-index-li-ul li ul li').hide();
$('.docs-index-li-ul li > a').click(function(){
    $('.docs-index-li-ul li ul li').hide();
    $(this).next('ul').children('li').show();
});

ここにフィドルがあります：

http://jsfiddle.net/q7vay/

なぜこれが起こっているのか、それを修正する方法について何か提案をいただければ幸いです。

よろしくお願いします！

4

1 に答える 1

1

私は2つのことをしました：

$('.docs-index-li-ul > li > a').click(function(){

ここに子セレクターを追加して、即時liの s のみが反応するようにします。次に追加しました：

$('.doc-index-li .docs-index-li-ul li ul li a').click(function(e){
   e.stopPropagation(); 
});

これらのサブサブメニュー アンカーがクリックされたときに伝播を停止するには:

JSFiddle

于 2013-11-02T14:19:09.380 に答える