时间戳

首页 > 解决方案 > 如何定位特定的 div 然后切换类？

javascript - 如何定位特定的 div 然后切换类？

问题描述

例如，我有这个菜单：

function toggleHiddenContent(tabClass) {
    let t = document.querySelectorAll(tabClass);
    for(var i = 0; i<t.length; i++) {
        t[i].classList.toggle="visible-class";
    }
}
.hidden-content {
    display: none;
}
.visible-class {
    display: block
}
<div>
    <a class="main-holder" onClick="toggleHiddenContent('.main-holder')">Main one</a>
    <div class="hidden-content">Hidden content One</div>

    <a class="main-holder" onClick="toggleHiddenContent('.main-holder')">Main two</a>
    <div class="hidden-content">Hidden content two</div>
</div>

但是，它会为所有类切换。我确实了解问题所在，但我将如何仅匹配被点击的而不是非活动（点击）的？

我在香草js中需要它

多谢你们

标签： javascriptjqueryhtmlcss

解决方案

classList.toggle是一个函数，而不是一个可分配的属性

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

尝试这个

function toggleHiddenContent(tabClass) {
  let t = document.querySelectorAll(tabClass);
  for (var i = 0; i < t.length; i++) {
    t[i].classList.toggle("visible-class");
  }
}

根据您的示例，我建议您进行一些小的更改，这将提高可读性，例如设置父级<div>（便于查找父级）以及onClick从 HTML 中删除。一探究竟

小提琴

从下面的答案中，我不知道nextElementSibling，这不需要您像我建议的那样更改您的 HTML

推荐阅读