제대로 작동하려면 내 드롭 다운 코드를 얻을 수 없습니다.

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'));