菜单导航接近当点击菜单外部div

Question

我试过菜单导航视图关闭和打开使用humburger图标，它工作正常。我试图菜单外部div点击，菜单关闭，但我再次点击humburger菜单它不是开放（工作），请指导，如何解决这个问题，对不起英语不好。感谢提前。

// 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>

在没有菜单外点击功能，菜单打开和关闭工作的很好，我需要与外部点击功能和菜单点击开启和关闭功能。

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

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"; 
    } 
}