菜单导航接近当点击菜单外部div
问题描述:
我试过菜单导航视图关闭和打开使用humburger图标,它工作正常。我试图菜单外部div点击,菜单关闭,但我再次点击humburger菜单它不是开放(工作),请指导,如何解决这个问题,对不起英语不好。感谢提前。菜单导航接近当点击菜单外部div
// 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>
在没有菜单外点击功能,菜单打开和关闭工作的很好,我需要与外部点击功能和菜单点击开启和关闭功能。
答
请说清楚你想要什么?当单击“菜单点击”并在“w_100”div内的任何其他地方点击时打开列表。
答
停止使用onclick()这是一个不好的做法。
在这里,我更新您的代码和许多样式。这正与的addEventListener
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";
}
}
+0
谢谢@andre,实际上,我的要求是与任何地方点击自动关闭,如果打开菜单列表相同的功能。 – Karthikeyan
点击“菜单点击”并点击“w_100”div内其他任何地方时关闭罚款。 我们再次需要点击“菜单点击”按钮,列表将打开并关闭。 这是我们想要的。 Plz建议。 – Karthikeyan