메뉴 nav close when 메뉴 바깥 쪽 div

Question

humburger 아이콘을 사용하여 메뉴 탐색보기 닫기 및 열기를 시도했지만 정상적으로 작동합니다. 나는 메뉴 외부 div 클릭, 메뉴를 닫으려고 시도하지만 다시 humburger 메뉴를 열지 않습니다 (Working), 제발,이 문제를 해결하는 방법, 가난한 영어에 대한 미안. 고맙습니다.

// Humburger menu working fine 
 
function menushow() { 
 
    if (document.getElementById("r_menu").className=="h_menu"){ 
 
     document.getElementById("r_menu").className = "s_menu"; 
 
     document.getElementById("menu_grp").className = "menu_grpa"; 
 
    } else{ 
 
     document.getElementById("r_menu").className = "h_menu"; 
 
     document.getElementById("menu_grp").className = "menu_grp"; 
 
    } 
 
} 
 

 
// menu outer click 
 
document.addEventListener('mouseup', function (e) { 
 
    var container = document.getElementById('r_menu1'); 
 
    if (!container.contains(e.target)) { 
 
     document.getElementById("r_menu").className = "h_menu"; 
 
    } 
 
}.bind(this)); 
 

.w_100{ 
 
    width:400px; 
 
    height:300px; 
 
    border:1px solid red; 
 
} 
 

 
.humb{ 
 
    background:cyan; 
 
    width:80px; 
 
    height:25px; 
 
} 
 

 
.h_menu{ 
 
    height: 0; 
 
    width: 0; 
 
    visibility: hidden; 
 
    overflow: hidden; 
 
    transition: all 0.3s; 
 
} 
 

 
.s_menu{ 
 
    width: 100px; 
 
    height: 200px; 
 
    visibility: visible; 
 
    overflow: hidden; 
 
    transition: all 0.3s; 
 
    z-index: 555; 
 
} 
 

 
ul.r_menu li{ 
 
    border:1px solid red; 
 
    padding: 5px 5px; 
 
}

<div id="menu" class="w_100"> 
 
    <p onclick="menushow()" class="humb">Menu Click</p> 
 
    <div id="r_menu" class="h_menu"> 
 
     <ul id="r_menu1" class="r_menu"> 
 
      <li>1</li> 
 
      <li>2</li> 
 
      <li>3</li> 
 
      <li>4</li> 
 
      <li>5</li> 
 
     </ul> 
 
    </div> 
 
</div>

잘 작동 메뉴 외측 클릭 기능 메뉴 개폐없이

는, I는 외부 클릭 기능과 메뉴 클릭 개폐 기능을 할 필요가있다.

Answer 1

원하는 것을 선택하십시오. 목록은 "메뉴 클릭"을 클릭하면 열리고 "w_100"div 내의 다른 곳을 클릭하면 종료됩니다.

Answer 2

onclick()을 사용하는 것을 중단하십시오. 나쁜 습관입니다.

여기 코드와 다양한 스타일을 업데이트합니다. 그것은하여 addEventListener

JsFiddle

HTML

<div id="menu" class="w_100"><p id="buttonZ" class="humb">Menu Click</p> 
       <div id="h_menu"> 
        <ul> 
         <li>1</li> 
         <li>2</li> 
         <li>3</li> 
         <li>4</li> 
         <li>5</li> 

        </ul> 
       </div></div> 

CSS

.w_100{ 
width:400px; 
height:300px; 
border:1px solid red; 
} 
.humb{ 
background:cyan; 
width:80px; 
line-height:25px; 
padding: 0 10px; 
} 


#h_menu{ 
width: 100px; 
height: 200px; 
transition: all 0.3s; 
} 

ul { 
    list-style:none; 
} 

ul.r_menu li{ 
    border:1px solid red; 
    padding: 5px 5px; 
} 

JS

01,235,164와 협력

document.getElementById("buttonZ").addEventListener("click", myFunction, false); 
function myFunction() { 
    var x = document.getElementById("h_menu"); 
    if (x.style.display === "none") { 
     x.style.display = "block"; 
    } else { 
     x.style.display = "none"; 
    } 
}