-1

私は今日メニューを作成していましたが、次のHTMLを使用して、この奇妙なケースに遭遇しました。

<div id="list1">
    <ul>
        <li>1</li>
        <li>2 - Here is a Submenu
            <ul>
                <li>3</li>
                <li>4</li>
            </ul>
        </li>
    </ul>
</div>

それから私は次のjsを使用しました：

$('#list1 li').click(function(){
   $('.list-item').removeClass('list-item');
   $(this).addClass('list-item');
});

これを行うと、クラスは外部にのみ適用され<li>ますが、親と子の両方に適用されるようにしたかったLIのです。

今私の質問は、この「リターン」をどのように処理できるので、クラスを親と子LIの両方に適用できるかということです。

jsはこれらのタイプのセレクターをどのように処理しますか？イベントは実際に2回実行され、最後に設定されたクラスが削除されていますか？

4

3 に答える 3

4

問題は、内部の両方のレベルのタグ$('#list1 li')を選択し、両方にクリック ハンドラーを適用できることです。さらに、クリックが伝播することを許可しているため、クリックした人だけでなく、複数の人に表示される可能性があります.li#list

外部レベルのみが必要な場合は、このように直接の子仕様を使用する必要があります。これにより、実際にインストールされているクリック ハンドラーが分離されます。

$("#list > ul > li")

これにより、最上位のliタグのみが取得されます。そして、コード全体は次のようになります。

$('#list1 > ul > li').click(function(){
   $('.list-item').removeClass('list-item');
   $(this).addClass('list-item');
});

ドキュメント全体ではなく、同じレベルの他の LI タグだけに removeClass 操作を分離したい場合は、次のようなものを使用できます。

$('#list1 > ul > li').click(function(){
   $(this).addClass('list-item').siblings().removeClass('list-item');
});

あなたのコメントは、あなたがクリックできるようにしたいこの LI タグについて、私を少し混乱させました。実際に下位レベルをクリック可能にしてから、クリックされたものと親 LI の両方にリスト項目クラスを適用する場合は、次のように実行できます。

$('#list1 > ul > li > ul > li').click(function() {
   $("#list1 .list-item").removeClass('list-item');
   $(this).parents("li").add(this).addClass('list-item');
   return(false);   // stop event propagation
});
于 2012-04-09T22:57:07.273 に答える
1

jQuery がメソッドを要素のリスト内の 1 つの要素に適用するか、すべての要素に適用するかは、メソッドによって異なります。

.click()両方とも.addClass()、セレクタ内のすべての jQuery オブジェクトに適用されます。

あなたの場合、クリック ハンドラーは のすべてのli要素に適用され#listます。 クリック$(this)された特定のものに適用されます。li

ただし、ネストされた要素があるため、ネストされた要素とその親の両方のli内部のネストされた要素をクリックすると、複数のクリック ハンドラが起動します。lilili

DOM ツリーを介したこのイベントの伝搬を防ぐには、クリック ハンドラーに stopPropagation() 呼び出しを配置し​​ます。

$('#list1 li').click(function(e){
   e.stopPropagation();

   $('.list-item').removeClass('list-item');
   $(this).addClass('list-item');
});

ハンドラーからもreturn falseできます。これにより、伝播が停止し、デフォルトのアクションが防止されます。これは jQuery に固有のものです。

于 2012-04-09T22:57:23.553 に答える
0

「現在の」ページ スタイルを追加する場合:

$('#list1 > ul > li').on('click',function(){
   $(this).addClass('list-item')    //adds class to clicked item
        .siblings()                 //find the others of the same level
        .removeClass('list-item');  //remove their styles
});
于 2012-04-09T22:57:26.010 に答える