当我再次点击它显示无和高度回到0px但内部元素显示并且不显示任何或离开页面

Question

此菜单，当您点击它们时，它们会下拉并显示特定的菜单块，然后再次单击该菜单，我将其显示为无，然后单击页面或其他菜单上的空白区域，您打开的特定菜单将关闭。

但是...

问题是当特定菜单是'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]: http://i.stack.imgur.com/5oEef.png

![MENU CLICKED AND DROP DOWN][2]
 [2]: http://i.stack.imgur.com/eWsGH.png

![MENU CLICKED BACK UP BUT PROBLEM OCCURRED][3]
 [3]: http://i.stack.imgur.com/qVwjQ.png

Answer 1

我可以自由更新您的代码。

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>