我現在正在學習 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>
uj5u.com熱心網友回復：
您必須找到與選擇器匹配的所有節點。querySelectorAll用于此。然后您必須遍歷所有節點并設定事件。此外，您必須在第二個<li>之后洗掉錯誤的結束標簽（這會弄亂選擇器）</a>Text</a>menu-item-has-children
const btns = document.querySelectorAll('.navigation-main-mobile .menu-item-has-children');
const boxs = document.querySelectorAll('.navigation-main-mobile .menu-item-has-children .sub-menu');
btns.forEach((btn, index) => {
btn.addEventListener('click', function handleClick() {
if (boxs[index].style.display === 'none') {
boxs[index].style.display = 'block';
} else {
boxs[index].style.display = 'none';
}
})});
uj5u.com熱心網友回復：
.querySelector()回傳與傳遞的值匹配的第一個元素。您遇到雙擊問題是因為您尚未為該
style.display屬性設定值。當您第一次單擊它時，瀏覽器意識到這一點并將屬性設定為none，然后第二次單擊執行您編碼的更改。
記住要明確說明您要編碼的內容，不要假設計算機會為您完成任何事情。祝你好運！
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/492011.html
標籤：javascript