当我再次单击时，它显示none，高度回到0px，但里面的元素显示，不显示none或离开页面

when i click again the it display none and height back to 0px but the element inside shows and does not display none or leave the page

本文关键字：显示 none 0px 离开 元素 单击 高度      更新时间：2023-09-26

这些菜单，当你点击它们时，它们会下拉并显示特定的菜单块，然后再次点击菜单，我将其显示为none，然后点击页面上的空白或其他菜单，你打开的特定菜单将关闭。

但是。。。

问题是，当特定菜单是"onclick"并显示块时，高度=390px，当我再次单击时，它显示无，高度回到0px，但里面的元素显示且不显示无或离开页面。。。为什么？

代码：

*<!--html markup-->
<header class="top">
<nav class="nav">
    <ul class="nav-menus">
        <li id="menu_1">
            <a href="#" onclick="document.getElementById('a').style.display = 'block';">a</a>
            <section id="a" class="dropMenus"><h1>A</h1></section>
        </li>
        <li id="menu_2">
            <a href="#" onclick="document.getElementById('b').style.display = 'block';">b</a>
            <section id="b" class="dropMenus">B</section>
        </li>
        <li id="menu_3">
            <a href="#" onclick="document.getElementById('c').style.display = 'block';">c</a>
            <section id="c" class="dropMenus">C</section>
        </li>
        <li id="menu_4">
            <a href="#" onclick="document.getElementById('d').style.display = 'block';">d</a>
            <section id="d" class="dropMenus">D</section>
        </li>
    </ul>
</nav>


.nav-menus .dropMenus{
    position: absolute;
    display: none;
    top: 90px;
    left: 0;
    width: 100%;
    background: rgba(255, 170, 0, 0.1);
    z-index: 1;
    box-shadow: 2px 2px 2px #888;
}

//javascript
var boxArray = ['a', 'b', 'c', 'd'];
window.addEventListener('mouseup', function drop(event){
    for(var i=0; i < boxArray.length; i++){
        var box = document.getElementById(boxArray[i]);
        var  maxH = '390px';
        if(event.target != box && event.target.parentNode != box){
            if(box.style.height == maxH && box.style.display === 'block'){  
                    box.style.display = 'none'; 
                    box.style.height = '0px'; 
                } else {
                    box.style.height = maxH;
                }
        }
    }
});

这是输出

![PAGE LOADED][1]
[1]: https://i.stack.imgur.com/5oEef.png
![MENU CLICKED AND DROP DOWN][2]
 [2]: https://i.stack.imgur.com/eWsGH.png
![MENU CLICKED BACK UP BUT PROBLEM OCCURRED][3]
 [3]: https://i.stack.imgur.com/qVwjQ.png

我已经自由更新了您的代码。

JSFiddle

function updateUI(element) {
  var dropMenus = document.getElementsByClassName('dropMenus');
  var el = document.getElementById(element);
  var show = el.style.display == 'none' ? true : false;
  for (var i in dropMenus) {
    if (!isNaN(i)) {
      dropMenus[i].style.height = '0px';
      dropMenus[i].style.display = 'none';
    }
  }
  if (show) {
    el.style.height = '390px';
    el.style.display = 'block';
  }
}
body {
  margin: 0;
  border: none;
  padding: 0;
}
.top {
  margin: 0 auto;
  overflow: hidden;
}
.nav {
  margin: 0 auto;
  border: none;
  padding: none;
  width: 100%;
  height: 90px;
  float: left;
  background: #e69900 url(http://dot.spindev.ph/wp-content/themes/fun/images/planner/imgright.png) no-repeat;
  background-size: 1366px 90px;
  font: 18px sans-serif, 'arial';
}
.nav li {
  display: inline;
}
.nav li a {
  text-decoration: none;
}
.nav > .logo a {
  text-decoration: none;
  float: left;
  font-size: 30px;
  margin: 30px 50px 20px 50px;
  color: #fff;
}
.nav > .nav-menus a {
  margin-top: -15px;
  padding: 30px 24px 25px 24px;
  float: left;
  color: #fff;
  transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
  -o-transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
  -webkit-transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
  -moz-transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
}
.nav > .nav-menus a:hover {
  background: rgba(179, 119, 0, 0.4);
  border-bottom: 10px solid #ffbb33;
  color: #fff;
}
.nav-menus .search {
  float: right;
  margin-right: 20px;
}
.nav-menus > .nav-icon {
  padding: 2px 5px;
  border: 1px solid #000;
  float: left;
  display: none;
}
.nav-menus > .nav-icon > div {
  width: 20px;
  height: 4px;
  background: #333;
  margin: 3px 0px;
  border-radius: 4px;
}
.nav-menus .dropMenus {
  position: absolute;
  display: none;
  top: 90px;
  left: 0;
  width: 100%;
  background: rgba(255, 170, 0, 0.1);
  z-index: 1;
  box-shadow: 2px 2px 2px #888;
}
<header class="top">
  <nav class="nav">
    <header class="logo">
      <a href="#">it's more fun</a>
    </header>
    <ul class="nav-menus">
      <div class="nav-icon">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <li id="menu_1">
        <a href="#" onclick="updateUI('philippines')">philippines</a>
        <section id="philippines" class="dropMenus">
          <h1>A</h1></section>
      </li>
      <li id="menu_2">
        <a href="#" onclick="updateUI('thingsToDo')">things to do</a>
        <section id="thingsToDo" class="dropMenus">B</section>
      </li>
      <li id="menu_3">
        <a href="#" onclick="updateUI('topDestinations')">top destinations</a>
        <section id="topDestinations" class="dropMenus">C</section>
      </li>
      <li id="menu_4">
        <a href="#" onclick="updateUI('planningYourTrip')">planning your trip</a>
        <section id="planningYourTrip" class="dropMenus">D</section>
      </li>
      <li class="search"><a href="#">search</a></li>
    </ul>
  </nav>
</header>

相关文章：