ドロップダウン・コードが正しく機能するように見えない

Question

ドロップダウン・ボタンをクリックするとサブメニューが表示されるドロップダウン・メニューを作成しようとしています。それ以外の場所をクリックすると、サブメニューが表示されなくなります。ここで

は私のコードです：

function initMainNavigation(container) { 

    container.find('.dropdown-toggle').click(function(e){ 
     var dropdown = $(this); 
     e.preventDefault(); 
     dropdown.next('.children, .sub-menu').toggleClass('toggled-on'); 
    }); 

    $("body").click(function(){ 
     var dropdown = container.find('.dropdown-toggle'); 
     dropdown.next('.children, .sub-menu').removeClass('toggled-on'); 
    }); 

} 
initMainNavigation($('.main-navigation')); 

しかし、私はドロップダウンをクリックすると、サブメニューが表示されません切り替えます。私が火かき棒でデバッグしたときには、$("body").click()イベントも同様にトリガされます。私はそれが'.main-navigation'が"body"の内部にあるからだと推測しています。

$("body").click()を削除すると正常に機能することがわかります。しかし、私は他をクリックすることはできませんどこにサブメニューを非表示にする。

Answer 1

あなたは.dropdownトグルをクリックすると、あなたの体のクリックイベントが.dropdown-トグルコンテナに泡ので、あなたは両方のイベントをトリガー

function initMainNavigation(container) { 

    container.find('.dropdown-toggle').click(function(e){ 
     var dropdown = $(this); 
     e.preventDefault(); 
     dropdown.next('.children, .sub-menu').toggleClass('toggled-on'); 
    }); 

    $("body").click(function(e){ 
     var dropdown = container.find('.dropdown-toggle'); 
     if(!$(e.target).closest('.dropdown-toggle').length) {//trigger the toggle only if the element is not .dropdown-toggle or a child of it 
     dropdown.next('.children, .sub-menu').removeClass('toggled-on'); 
     } 
    }); 

} 
initMainNavigation($('.main-navigation'));