Javascript 当我再次单击时，它显示无，高度返回到0px，但内部的元素显示无，不显示无或离开页面

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

但是

问题是，当特定菜单为“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>

---

我已经冒昧地更新了你的代码

函数更新（元素）{
var dropMenus=document.getElementsByClassName（'dropMenus'）；
var el=document.getElementById（元素）；
var show=el.style.display==“无”？真：假；
用于（下拉菜单中的变量i）{
如果（！isNaN（i））{
下拉菜单[i].style.height='0px'；
dropMenus[i].style.display='none'；
}
}
如果（显示）{
el.style.height='390px'；
el.style.display='block'；
}
}

正文{
保证金：0；
边界：无；
填充：0；
}
.顶{
保证金：0自动；
溢出：隐藏；
}
.导航{
保证金：0自动；
边界：无；
填充：无；
宽度：100%；
高度：90px；
浮动：左；
背景：#e69900 url(http://dot.spindev.ph/wp-content/themes/fun/images/planner/imgright.png)不重复；
背景尺寸：1366px 90px；
字体：18px无衬线，“arial”；
}
李国荣先生{
显示：内联；
}
李娜先生{
文字装饰：无；
}
.nav>.logo a{
文字装饰：无；
浮动：左；
字体大小：30px；
利润率：30px 50px 20px 50px；
颜色：#fff；
}
.nav>.nav菜单a{
利润上限：-15px；
填充：30px24px25px24px；
浮动：左；
颜色：#fff；
过渡：背景0.9s，线性0s，颜色0.9s，线性0s；
-o型过渡：背景0.9s，线性0s，颜色0.9s，线性0s；
-webkit过渡：背景0.9s，线性0s，颜色0.9s，线性0s；
-moz过渡：背景0.9s，线性0s，颜色0.9s，线性0s；
}
.nav>.nav菜单a:悬停{
背景：rgba（179119,0,0.4）；
边框底部：10px实心#ffbb33；
颜色：#fff；
}
.导航菜单.搜索{
浮动：对；
右边距：20px；
}
.nav菜单>.nav图标{
填充物：2px 5px；
边框：1px实心#000；
浮动：左；
显示：无；
}
.nav菜单>.nav图标>div{
宽度：20px；
高度：4px；
背景：#333；
利润率：3px0px；
边界半径：4px；
}
.导航菜单.下拉菜单{
位置：绝对位置；
显示：无；
顶部：90px；
左：0；
宽度：100%；
背景：rgba（255,170,0,0.1）；
z指数：1；
盒影：2px2px2p888；
}

A.


B


C


D

try

overflow:hidden

在它的类中尝试它，解决问题，但他们的错误…当你关闭特定菜单时，它会隐藏，但当你打开其他菜单时，它会显示他们的。。谢谢..您能在JSFIDLE中创建一个工作示例吗？这会让我们更容易理解和解决它。查看我的样本他们的人我已经运行了…我希望你能帮助我谢谢…这是链接well Mens谢谢。。。作为JavaScript的新手，我想在了解和使用任何库（如jquery和框架）之前了解更多的JavaScript。。谢谢男人们！

.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