HTML "드롭 다운 메뉴"- 클릭시 토글

Question

요소를 클릭 할 때 나타나는 HTML에 "드롭 다운 메뉴"를 만들었습니다. 당신이 원인이됩니다 li에 "선택"클래스를 적용 할 요소를 클릭하면 하위 메뉴가 나타납니다합니다 :

jsFiddle Example

내가 지금까지 코드가 그 표시됩니다 클릭 할 때/메뉴를 숨기기 메뉴 항목. 다른 메뉴를 선택하면 그것에서 선택한 클래스를 제거하고 클릭 된 일에 전환됩니다

$("#menu").on("click", "li.dropdown", function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 

    $(this).siblings(".dropdown").removeClass("selected"); 
    $(this).toggleClass("selected"); 
}); 

문제는 그 나는 내가 내 아이를 클릭하면 지금이 권리를 가지고 방법 하위 메뉴는 메뉴를 토글하고 닫습니다.

또한 문서의 다른 곳을 클릭 할 때 메뉴를 숨기려고합니다. 이를 통해 수행 할 수 있습니다

$(document).on("click", function(event) { 
    $("#menu .dropdown").removeClass("selected"); 
}); 

1) 나는 드롭 다운 부분을 클릭하면 메뉴를 숨기지 않고이 토글 기능을 사용하려면 어떻게합니까?

2) 메뉴/하위 메뉴 이외의 다른 곳에서 문서를 클릭하면 메뉴를 숨기는 방법은 무엇입니까?

Answer 1

수락 가능한 방식으로 답변 # 2가있는 것 같습니다.

$('.submenu').click(function(e) { 
    e.stopPropagation(); 
});​ 

jsFiddle example