原生JS编写点击显示隐藏，以及里面需要注意的地方

好长时间不用原生JS编写代码，今天掏出原生JS来实现了一个简单的点击显示和隐藏的功能，果然是好久不写原生JS了，这个功能实现都出现了问题。。。【手动滑稽】【手动滑稽】【手动滑稽】。。
现在记录下为什么出现这个问题，做一个备忘吧！
首先先是dom结构：




<div class="nav_manage">
    <p id="manageBtn">系统管理 <span class="sanXia"></span></p>
    <div class="nav_manage_hid">
        <ul>
            <li>listOne</li>
        </ul>
    </div>





想要实现的功能是，点击系统管理的那个p标签，实现下面的div内部的内容的实现和隐藏，下面是最初的JS代码，css样式忽略





var manageBtn = document.getElementById('manageBtn');
var managehid = document.getElementsByClassName('nav_manage_hid')[0];
var showMana = 0;
 
manageBtn.addEventListener('click',function() {
    if(showMana == 0) {
        manageBtn.className = "activeMana";
        managehid.style.display = "block";
        showMana = 1;
    }
});
 
 
document.addEventListener('click', function() {
    if(showMana == 1) {
        manageBtn.className = "";
        managehid.style.display = 'none';
        showMana = 0;
    }
  
})




代码表面看上去没什么问题，逻辑上也能实现，

但是。。。。。。。。。。。。。。。。。。。。。。。。。

实际上是有问题的，那么问题在哪呢？

原因是上面的方法会触发事件冒泡，所以我们在点击那个p标签的时候会同时触发这两个函数，所以我们的隐藏的区域不会显示，下面是修改后的js，添加上阻止默认事件就可以了。。这是个问题要切记。









var manageBtn = document.getElementById('manageBtn');
var managehid = document.getElementsByClassName('nav_manage_hid')[0];
var showMana = 0;
 
manageBtn.addEventListener('click',function(e) {
    e = window.event||event;
    if(showMana == 0) {
        manageBtn.className = "activeMana";
        managehid.style.display = "block";
        showMana = 1;
    }
    e.stopPropagation();
});
 
document.addEventListener('click', function() {
    if(showMana == 1) {
        manageBtn.className = "";
        managehid.style.display = 'none';
        showMana = 0;
    }
})

https://blog.csdn.net/mulige/article/details/80393367