gpt4 book ai didi

javascript - 获取下拉菜单的元素

转载 作者:行者123 更新时间:2023-11-30 09:16:09 24 4
gpt4 key购买 nike

想要建立一个下拉菜单。在“单击”时,子菜单应切换为“show-subnav”。

这是我的代码:

<ul class="mainnav">
<li>First<span class="toggle">+</span>
<ul class="subnav">
<li>Subnav I</li>
<li>Subnav II</li>
<li>Subnav III</li>
</ul>
</li>
<li>Second<span class="toggle">+</span>
<ul class="subnav">
<li>Subnav I</li>
<li>Subnav II</li>
<li>Subnav III</li>
</ul>
</li>
<li>Third</>
</ul>

这是我的 JavaScript:

const toggle = document.querySelectorAll(".toggle");

toggle.forEach(plusButton => {
plusButton.addEventListener("click", () => {
// How could I get the child from the mainnav li
// to toggle a class like:
subnavi.classList.toggle("show-subnav");
});
});

我想将一个类切换到特定的子菜单-ul。但始终只获取第一个子菜单-ul。

谢谢

最佳答案

看看Node.parentElementparentNode.children , 你将能够得到你的 <ul> :

// Inside your forEach()
plusButton.addEventListener("click", function () {
// Get parent <li> of plusButton
let li = this.parentElement,

// Get <li> children (so <ul> should be in it right?)
liChildren = li.children;

// Filters liChildren to get your <ul>
});

关键词this不会引用被点击的 plusButton如果您使用带箭头的函数。

关于javascript - 获取下拉菜单的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54987315/

24 4 0