0

私は JQuery や JavaScript の専門家ではなく、Web サイトのナビゲーションにほとんど問題はありません。私のナビゲーションは、典型的な Windows リソース管理ナビゲーションのように見えます。

Title
    subtitle
    subtitle
        subsubtile
    subtitle
Title
    subtitle

典型的な Windows リソース管理ナビゲーションと同じように機能するようにしたいのですが、タイトルをクリックすると字幕が表示され、タイトルを再クリックするとクリックされたタイトルの字幕が非表示になります。

次のコードでタイトルを開くことができましたが、それらを閉じる方法がわかりません。

$( document ).ready(function() {
    $('#navigation').click(function() {
        $('#navigation ul li:hover').children('#navigation ul li ul').slideDown(400);
    });
})
4

1 に答える 1

3

jQuery には便利な短縮形があります: .slideToggle()

選択された要素は、現在表示されていない場合は表示され、その逆も同様です。

$(this)もう 1 つの重要な部分は、イベント ハンドラーで使用できることです。イベントが処理される要素です。

ツリートラバーサル機能も.children()あります。これは、結果が呼び出された選択された要素に対して相対的に選択されることを意味します。そのため、 example 要素の直下にあるすべてのリンクが選択されるため、必要ありません。$('#example').children('a')$('#example').children('#example a')

私はあなたのためにコードをまとめました：

$(document).ready(function() {
    $('#navigation ul li').click(function(e) {
        e.stopPropagation();
        $(this).children('ul').slideToggle(400);
    });
});

または、1 つのイベント ハンドラーとバブリングを使用する場合は、次のようにします。

$(function() {
    $('#navigation').on('click', 'li', function(e) {
        e.stopPropagation();
        $(this).children('ul').slideToggle(400);
    });
});

もちろん、これら2つは、トグルがクリックイベントを発生さ<ul>せる直接の子である場合にのみ機能します。<li>

編集：

@thebreiflabb がコメントで述べたように、イベント バブリングにより、クリック イベントはデフォルトでクリックされた要素のすべての親で発生します。

いずれかの親もセレクターに一致する場合、同じイベント ハンドラーが呼び出されます。

e.stopPropagation()イベントがここで処理され、親要素で発生する必要がないことを示しています。

違いを確認するには、これらのフィドルの両方で「アイテム 4」の下の「サブアイテム 2」をクリックします。

伝播を停止します。

伝播を止めることなく。

ご覧のとおり、stopPropagation()「項目 4」も閉じません。

于 2013-05-02T14:56:49.343 に答える