마우스 아웃시 메뉴 닫기

버튼을 클릭하면 버튼 오른쪽에 메뉴가 팝업됩니다. 이 메뉴는 다소 큰 목록 항목입니다. 이 메뉴가있는 페이지에는 다른 많은 요소가 포함되어 있습니다.마우스 아웃시 메뉴 닫기

메뉴가 팝업되면 사용자가 메뉴에서 옵션을 클릭하면 메뉴가 사라집니다 (menu.hide()).

그러나 다른 어떤 식 으로든 메뉴를 제거 할 수 없다는 느낌이 들었습니다. "사용자가 메뉴를 클릭하면 메뉴가 숨겨집니다."라는 생각을 좋아합니다. 하지만 메뉴를 제외한 모든 것에 이벤트를 바인딩하는 "clickoutside"이벤트를하는 것은 싫다.

또 다른 옵션은 "mouseout"이지만 마우스를 화면을 가로 질러 이동하여 메뉴에 도달해야하므로 항상 "mouseout"이 너무 일찍 시작됩니다.

사용자가 메뉴에 바인딩 할 수있는 이벤트에 대한 아이디어가 있으므로 자연스럽고 자유롭게 제거 할 수 있습니까?

출처

2012-10-01 Jeff

"clickoutside"이벤트의 의미는 무엇입니까? 당신은 아이디어가 마음에 들지만, 맘에 안들니? 그것을 구현하는 방법을 모르십니까? – thatidiotguy

예, Ben Alman의 플러그인이 있습니다. 아주 잘합니다. 그러나, 내 메뉴 외에 다른 모든 옵션 (버튼, 라디오 등)을 바인딩합니다. 과도한 바인딩을 해결하는 방법은 e.stopPropagation(); 다른 모든 처리기에서, 나는 그것을 좋아하지 않습니다. .. 그래서 나는 다른 해결책을 찾고있다. – Jeff

같은 것을 사용 (그는 옵션을 클릭 아닌 경우). 클릭 이벤트를 사용하여 클릭이 메뉴 외부에서 발생했는지 확인하십시오. 메뉴 외부에있는 경우 메뉴를 숨기고 바인드를 제거하십시오.

// binding function  
closeMe = function(e) { 
    var $target = $(e.target); 
    // click is not inside the menu 
    if(!$target.hasClass('menu') && $target.parents('.menu').length !== 1) { 
     // hide menu 
     menu.hide(); 
     // unbind events 
     $('body').unbind('mousedown.menuhide', closeMe); 
    } 
}; 
// show menu 
menu.show(function() { 
    // bind menu hide event 
    $('body').bind('mousedown.menuhide', closeMe); 
});

출처

2012-10-01 19:30:02 Pim

은 아주 쉽게, 그냥 메뉴가 열려있을 때 몸에 하나 개의 이벤트를 바인딩 할 수 있습니다이

$('html').click(function() { 
    menu.close(); 
}); 

$('#menu').click(function(e){ 
    e.stopPropagation(); 

    // do stuff 
    // maybe some nice animation or w/e 

    menu.close(); 
});

출처

2012-10-01 19:16:17 Bart

마우스 아웃시 메뉴 닫기

답변

관련 문제