사용자 정의 HTML 드롭 다운 메뉴에서 "터치 앤 필"

Question

HTML 페이지 + JavaScript에 사용자 정의 드롭 다운 메뉴를 만들었습니다.

버튼 "Freunde"을 클릭됩니다

• , 드롭 다운 메뉴 버튼을 다시 클릭 도착하면
• 이 드롭 다운 메뉴는
• 때 마우스를 사라 나타납니다 : 나는 메뉴는 다음과 같은 역할을하는 것을 원하는 커서가 버튼 + 드롭 다운 메뉴의 "영역"을 벗어나면 사라집니다.

드롭 다운 메뉴는 여러 div가있는 메인 div ("메뉴 항목")로 구성됩니다.

내 첫 번째 방법은을 드롭 다운 메뉴의 기본 div에 넣는 것이지만 다음과 같은 문제가 있습니다. 내부 div 위로 마우스를 가져 가면 onmouseout()이 참이되고 내부 div가 전체 main div에서 드롭 다운 메뉴는 사용자가 마우스를 가리 키지 않는 한만 볼 수 있습니다.

그래서 저는 JQuery 라이트 박스처럼 유사하게 해결했습니다. 즉, "배경"div를 전체 화면에 붙이고 거기에 드롭 다운 메뉴를 붙여 넣고 onmouseover()을 설정하십시오. 그것은 거의 완벽 할 것입니다, 그러나 "Freunde"버튼은 그것으로부터 또한 영향을받습니다.

다른 요소의 이벤트를 결합하는 방법이 있습니까?

if(cursor is not over Button && cursor is not over DDMenu) set invisible 

처럼 내가 원하는 표시 당신은

<ul> 
    <li></li> 
    <li></li> 
</ul> 

로 설정하고 가정 이미지를

Answer 1

다음에이처럼 CSS를 설정할 수 있습니다 :

#nav ul li ul { display: none; } 
#nav ul li.active:hover ul { display: block; } 

이 절대적으로 총 코딩이며,

var menuClick = function() { 
    $(this).toggleClass('active'); 
    menuHover(); 
}; 
var menuHover = function() { 
    $('#nav li.active').hover(function() { 

    }, function() { 
     $(this).removeClass('active'); 
    }); 
}); 

$('#nav > ul > li').on('click', menuClick); 

은 부여,하지만 난 그것을 작동해야한다고 생각 : 0

그리고는 다음과 같이 당신의 JS를 설정합니다. (이것은 또한 당신이 jQuery 라이브러리를 사용하고 있다고 가정한다).