jquery를 닫으려면 외부 메뉴를 클릭하십시오.

응답 성있는 웹 사이트를 작업 중이며 타블렛에서 드롭 다운 메뉴가되었지만 문서 외부에서 클릭이 이루어지면 메뉴가 닫히고 (또한 마우스 화살표가 변경되어야합니다. 가) 정상적인 형태의에 나는 여기에 내가 사용하고 코드입니다,이 작업을 수행 할 수있는 방법을 찾을 수 없습니다 :jquery를 닫으려면 외부 메뉴를 클릭하십시오.

JQUERY

$(function() { 

    var btn_mobile = $('#nav-mobile'), 
     menu = $('#menu').find('ul'); 

    btn_mobile.on('click', function (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 


     var el = $(this); 

     el.toggleClass('nav-active'); 
     menu.toggleClass('open-menu'); 

    }) 

});

HTML

<nav id="menu"><a class="nav-mobile" id="nav-mobile" href="#">MENU</a> 
<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="work.html">Work</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="contact.html">Contact</a></li> 
</ul>

PARTIAL CSS (태블릿)

#nav-mobile{ 
    display: none; 
    background: url(../images/menu-icons.svg) no-repeat 42px -2px; 
    float: right; 
    width:75px; 
    height:35px; 
    padding-top:9px; 
    position: absolute; 
    right:0; 
    top:0; 
    font-weight:bold; 

} 

#nav-mobile.nav-active{opacity: 1; background: url(../images/menu-icons.svg) no-repeat 42px -48px;} 

/* TABLET */ 
    #nav-mobile{display: block; } 
    #menu{margin-top:0px;width: 100%;float: none;padding-top:55px;} 
    #menu ul{ 
    max-height: 0; 
    overflow: hidden; 
    text-align:center; 
    position:relative; 
    z-index:500; 
    transition: max-height .5s, box-shadow 1.2s, opacity 0.5s; 
    opacity:0; 
    margin:0 -3.2%; 
    } 
    #menu li{background:#fff;border-bottom: 1px solid #ececec;float: none;} 
    #menu li a{padding: 12px 0;height: auto;width:100%; text-transform:uppercase;} 
    #menu li a:hover{background:#fbfbfb;} 
    #menu ul.open-menu{max-height: 400px;transition: max-height .5s, box-shadow 1.2s, opacity 0.5s; border-top: 1px solid #CCC; box-shadow: 0px 9000px 0px 9000px rgba(0,0,0,0.15); opacity:1; }

귀하의 관심에 감사드립니다!.

출처

2014-06-05 user3709158

당신은 메뉴가 열립니다 문서 전체를 채우고 보이지 않는 사업부를 만들 수 있습니다. div의 z- 색인이 메뉴 z- 색인보다 작은 지 확인하십시오. 그리고 그 div에 클릭 핸들러를 추가하십시오. 누군가가 그것을 클릭하면 메뉴를 닫으십시오. – Hardy

[요소 외부의 클릭을 어떻게 감지합니까?] (http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) –

당신은 전체 페이지 (CSS의 Z- 색인을 manipuling)를 포함 할 메뉴 뒤의 투명 레이어를 사용할 수 있습니다

이 레이어에는 클릭을 추가합니다. 메뉴를 숨기고 화살표를 변경하고 "display : none;"이벤트 핸들러 그 자체. 메뉴 드롭 다운해야 할 것 "디스플레이 : 블록"을 다시

을 선택하면 부트 스트랩은 조동사와 함께 처리하는 방법에 대해 살펴 있습니다 http://getbootstrap.com/javascript/#modals

출처

2014-06-05 00:37:06 Dionys

감사합니다. 너무 많이 !! :) – user3709158

마우스 커서 변경을위한 jquery에서 hover(in,out)을보고 body :not['#nav..'] 선택기를 사용하여 메뉴를 닫습니다.

호버 예 :

// Hover script 
btn_mobile.hover(
    function() { 
     // {Hover in of the menu} 
     // change the mouse here 
    }, 
    function() { // out 
     // {Hover out of the menu} 
     // change the mouse here 

    } 
);

출처

2014-06-05 00:34:01 Kivylius

jquery를 닫으려면 외부 메뉴를 클릭하십시오.

답변

관련 문제