Javascript 外部设置显示样式会导致onclick（）事件两次单击进行初始化

为什么我们必须设置

display:noneonclick（）

通过外部设置，代码可以工作，但需要两次单击才能初始化，一次单击设置事件处理程序，另一次单击触发事件处理程序。我的代码是这样的：


功能子菜单（）{
Menu=document.getElementById（'Menu'）；
sub=document.getElementById（'sub'）；
函数显示（）{
如果（sub.style.display=='none'）{
sub.style.display=“内联块”；
}否则{
sub.style.display=“无”；
}
}
菜单.addEventListener（“单击”，显示）；
}
函数pageLoad（）{
子菜单（）；
}
nav{
位置：相对位置；
保证金：0自动；
前-60%；
左：24%；
显示：块；
宽度：33%；
身高：20%；
}
导航ul{
列表样式类型：无；
宽度：100%；
显示：块；
}
李国荣{
宽度：100%；
颜色：#888；
z指数：0；
显示：块；
字号：1.5em；
}
海军ulli a{
文字装饰：无；
颜色：#888；
}
#潜艇{
宽度：120%；
位置：绝对位置；
最高：230%；
z指数：1；
显示：无；
背景色：rgba（51,51,51,0.8）；
保证金：0自动；
}
#子里{
利润上限：3倍；
填充：2px；
宽度：100%；
不透明度：2；
}


-菜单-








如果要在CSS中设置
显示的样式，则从
子样式开始。显示将是一个空字符串，但是如果使用style属性在元素上设置它，则它将具有您给定的值。您可以通过检查值是否为空字符串来解决这个问题，但接下来您必须了解这对应用程序意味着什么（基于CSS中的初始值）

我想在这里提出一个替代方案，该方案也适用于其他场景，并且不需要更改样式属性，而是依赖于更改元素的类

如果要添加一些CSS以隐藏默认子菜单，并添加一个可以切换菜单以使其可见的类：

nav ul ul { 
    display: none; 
}
nav .active {
    display: block;
}

使用下面的JS切换类

var menu = document.getElementById('menu');
var sub = document.getElementById('sub');
function toggleMenu(){
    sub.classList.toggle('active');
}
menu.addEventListener('click', toggleMenu);

通过这种方式，您可以轻松地调整代码，以便对多个子菜单执行此操作，因此这里还有另一个更通用的示例，它允许您拥有多个菜单和子菜单

e、 g

HTML

JS

var menus=document.querySelectorAll（'.menu'）；
功能切换菜单（e）{
var目标=e.target；
//只关心单击父列表项。
if（target.className.indexOf（'parent'）=-1）{
返回；
}
//使用querySelector查找此父级
中的第一个

var子菜单=target.querySelector（'ul'）；
如果（子菜单）{
子菜单.classList.toggle（'active'）；
}
}
//向每个菜单添加一个单击处理程序
菜单。forEach（功能（菜单）{
menu.addEventListener（“单击”，切换菜单）；
});
另请注意，您的html不正确。您已经终止了
li
-
-菜单-
，然后再往下一步，您再次终止了它，谢谢@KScandrett我错过了：/
<nav class="menu">
    <ul>
        <li class="parent"> - Menu 1 -
            <ul>
                <li><a href="#sub">sub menu 1</a></li>
                <li><a href="#sub">sub menu 1</a></li>
            </ul>
        </li>
        <li class="parent"> - Menu 2 -
            <ul>
                <li><a href="#sub">sub menu 2</a></li>
                <li><a href="#sub">sub menu 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

.menu ul ul { display: none; }
.menu .active {
    display: block;
}

var menus = document.querySelectorAll('.menu');

function toggleMenu(e){

    var target = e.target;
    // only care about clicks on parent list items.
    if (target.className.indexOf('parent') === -1) {
        return;
    }
    // use querySelector to find the first <ul> inside this parent <li>
    var submenu = target.querySelector('ul');

    if (submenu) {
        submenu.classList.toggle('active');
    }
}

// add a click handler to each menu
menus.forEach(function(menu) {
    menu.addEventListener('click', toggleMenu);
});