Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在没有菜单外部点击功能，菜单开启和关闭工作正常的情况下，我需要使用外部点击功能和菜单点击打开和关闭功能。

Answer 1

请清楚你想要什么？列表打开时单击＆＃34;菜单单击＆＃34;点击＆＃34; w_100＆＃34;格。

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

单击菜单外部div时菜单导航接近

2 个答案: