Javascript仅通过双击问题定位第一个元素

【问题标题】：Javascript targeting the first element only with a double click issueJavascript仅通过双击问题定位第一个元素
【发布时间】：2022-06-17 05:45:21
【问题描述】：

我现在正在学习 JavaScript（3 周前在大学开始学习），我正在努力创建一个移动菜单，您可以通过点击它来显示或隐藏隐藏的菜单。

这里的问题是 JS 只针对第一个类而不是所有类。您需要单击两次才能显示有效的元素。

我会非常感谢一些指导，并希望能帮助我理解问题。

谢谢

<script>
const btn = document.querySelector('.navigation-main-mobile .menu-item-has-children');
const box = document.querySelector('.navigation-main-mobile .menu-item-has-children .sub-menu');

btn.addEventListener('click', function handleClick() {
if (box.style.display === 'none') {
    box.style.display = 'block';
} else {
    box.style.display = 'none';
}
});
</script>

<ul id="menu-primary-menu" class="navigation-main-mobile"><li><a href="/">Text</a></li>
    <li class="menu-item-has-children"><a href="#">Text</a>
        <ul class="sub-menu">
            <li><a href="http://1.io/1/1/">Text</a></li>
            <li><a href="http://1.io/2/2/">Text</a></li>
            <li><a href="http://1.io/3/3/">Text</a></li>
        </ul>
    </li>
    <li class="current-menu-item"><a href="/news/" aria-current="page"></a>Text</a></li>
    <li class="menu-item-has-children"><a href="#"></a>Text</a></li>
        <ul class="sub-menu">
            <li><a href="http://1.io/4/">Text</a></li>
            <li><a href="http://1.io/5/">Text</a></li>
            <li><a href="http://1.io/6/">Text</a></li>
            <li><a href="/about/">Text</a></li>
        </ul>
    </li>
</ul>

【问题讨论】：

• 如果我认为这一切都错了，请告诉我 :)

标签： javascript