Javascript目标仅单击了元素

Question

所以我有一个侧面导航，它在一些列表中有一个子菜单，我试图只在单击时显示子菜单。

这是HTML

<div class="sidebar">
<ul class="nav">
<li class="main-menu" onclick="dispDrop()"><a href="">Item 1</a>
<ul class="sub-menu">
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
</ul>
</li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li class="main-menu" onclick="dispDrop()"><a href="">Item 4</a>
<ul class="sub-menu">
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
</ul>
</li>
<li><a href="">Item 5</a></li>
<li><a href="">Item 6</a></li>
</ul>
</div>

这是它的CSS

.nav ul {
display: none;
position: relative;
padding: 0px;
}
.nav li.active ul {
display: block;
}

这是javascript

<script type="text/javascript">
const navItem = document.querySelector('.main-menu');
function dispDrop() {
navItem.classList.toggle("active");
}
</script>

起初它工作得很好，但当我将子菜单添加到另一个列表时，它开始出现故障，无法显示子菜单。

有没有办法只针对单击的<li>，只将类添加/切换到单击的<li>？

Answer 1

您可以将this添加到onclick="dispDrop()"

然后执行以下操作。

function dispDrop(obj) {
obj.classList.toggle("active");
}

演示

function dispDrop(obj) {
obj.classList.toggle("active");
}

.nav ul {
display: none;
position: relative;
padding: 0px;
}
.nav li.active ul {
display: block;
}

<div class="sidebar">
<ul class="nav">
<li class="main-menu" onclick="dispDrop(this)"><a href="#">Item 1</a>
<ul class="sub-menu">
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
</ul>
</li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li class="main-menu" onclick="dispDrop(this)"><a href="#">Item 4</a>
<ul class="sub-menu">
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
</ul>
</li>
<li><a href="">Item 5</a></li>
<li><a href="">Item 6</a></li>
</ul>
</div>

Answer 2

下面列出了我发现的一些问题。

• 您正在将navItem设置为document.querySelector('.main-menu')。这将始终返回具有该类名的第一个DOM元素。不是你需要的目标
• 您的点击事件将触发锚点标记的点击事件，这将导致页面的重新加载

我已经通过点击tiggered来切换目标elemet的类列表来解决这个问题。这将提供触发点击的所需目标。

在点击事件内部调用e.preventDefault(); e.stopPropagation();，停止点击事件触发锚定标签点击事件。

工作Fiddle

function dispDrop(e) {
e.currentTarget.classList.toggle("active");
e.preventDefault();
e.stopPropagation();
}

.nav ul {
display: none;
position: relative;
padding: 0px;
}
.nav li.active ul {
display: block;
}

<div class="sidebar">
<ul class="nav">
<li class="main-menu" onclick="dispDrop(event)">
<a href="">Item 1</a>
<ul class="sub-menu">
<li><a href="">Sub-item 11</a></li>
<li><a href="">Sub-item 11</a></li>
<li><a href="">Sub-item 11</a></li>
<li><a href="">Sub-item 11</a></li>
</ul>
</li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li class="main-menu" onclick="dispDrop(event)">
<a href="">Item 4</a>
<ul class="sub-menu">
<li><a href="">Sub-item 12</a></li>
<li><a href="">Sub-item 12</a></li>
<li><a href="">Sub-item 12</a></li>
<li><a href="">Sub-item 12</a></li>
</ul>
</li>
<li><a href="">Item 5</a></li>
<li><a href="">Item 6</a></li>
</ul>
</div>

Answer 3

我重写了一点代码。问题发生在锚上。你可以

1. 移除锚点样式li标签以具有锚点感觉(光标：指针等(或

2. 您将#添加到您的href中。这将避免遵循链接

然后我用你的onclick事件传递当前点击对象。然后eventHandler就知道单击了哪个元素。

function dispDrop(event) {
event.querySelector('ul').classList.toggle("hide");       
}

.nav ul {    
position: relative;
padding: 0px;
}
.hide {
display: none;
position: relative;
}

<div class="sidebar">
<ul class="nav">
<li class="main-menu" onclick="dispDrop(this)">
<a href="#">Item 1</a>
<ul class="sub-menu hide">
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
<li><a href="">Sub-item 1</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li class="main-menu clicki" onclick="dispDrop(this)">
<a href="#">Item 4</a>
<ul class="sub-menu hide">
<li><a href="#">Sub-item A </a></li>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 1</a></li>
</ul>
</li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
</div>