javascript - 使用 foreach 时在辅助选择器上切换类
问题描述
我之前问过一个问题,但由于写得不好并且没有提供所有必要的细节而将其删除,所以希望我有这个时间。
我目前有一个类似手风琴的菜单,其中有一个切换按钮来显示/隐藏内容。我已经使用 forEach 函数来侦听所述切换按钮上的“点击”,但它目前仅将一个类应用于该按钮以将其样式更改为打开/关闭,我正在尝试弄清楚如何也切换一个类另一个与按钮相关的元素(此元素是切换按钮父级的兄弟 - 请参阅 HTML 标记)。
如您所见,我可以独立切换每个按钮的背景颜色。
HTML:
<nav class="category-menu">
<div class="category-menu__item">
<div class="category-menu__link">
<a href="#">Group</a>
<button class="category-menu__toggle">
<span class="bar bar--one"></span>
<span class="bar bar--two"></span>
</button>
</div>
<div class="category-submenu">
<div class="category-submenu__item">
<div class="category-submenu__link"><a href="#">List</a></div>
<div class="category-supersubmenu">
<div class="category-supersubmenu__item">
<div class="category-supersubmenu__link"><a href="#">Item 1</a></div>
</div>
<div class="category-supersubmenu__item">
<div class="category-supersubmenu__link"><a href="#">Item 2</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="category-menu__item">
<div class="category-menu__link">
<a href="#">Group</a>
<button class="category-menu__toggle">
<span class="bar bar--one"></span>
<span class="bar bar--two"></span>
</button>
</div>
<div class="category-submenu">
<div class="category-submenu__item">
<div class="category-submenu__link"><a href="#">List</a></div>
<div class="category-supersubmenu">
<div class="category-supersubmenu__item">
<div class="category-supersubmenu__link"><a href="#">Item 1</a></div>
</div>
<div class="category-supersubmenu__item">
<div class="category-supersubmenu__link"><a href="#">Item 2</a></div>
</div>
</div>
</div>
</div>
</div>
</nav>
CSS:
.category-menu {
width: 50rem;
background-color: darkgreen;
color: white;
font-size: 1.25rem;
}
.category-menu__link {
min-height: 3rem;
background-color: transparent;
display: flex;
justify-content: space-between;
}
.category-menu__link a {
width: 100%;
margin-right: 1.5rem;
text-decoration: none;
color: inherit;
line-height: 1.15;
display: flex;
align-items: center;
}
.category-menu__toggle {
width: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: transparent;
border: none;
cursor: pointer;
}
.category-menu__toggle .bar {
display: block;
height: 0.25rem;
width: 1.5rem;
background-color: white;
border-radius: 0.25rem;
}
.category-menu__toggle .bar--one {
transform: translateY(50%) rotate(90deg);
}
.category-menu__toggle .bar--two {
transform: translateY(-50%);
}
.category-submenu {
background-color: green;
padding: 0.5rem 1rem;
font-size: 1.125rem;
color: var(--bluegrey-300);
}
.category-submenu__link {
min-height: 2rem;
display: flex;
align-items: center;
line-height: 1.15;
}
.category-submenu__link a {
color: inherit;
text-decoration: none;
}
.category-supersubmenu {
padding: 0.5rem;
}
.category-supersubmenu__link {
min-height: 2rem;
display: flex;
align-items: center;
line-height: 1.15;
}
.category-supersubmenu__link a {
color: inherit;
text-decoration: none;
}
.category-menu__toggle--open {
background-color: red;
}
JS:
const catTogglers = document.querySelectorAll(".category-menu__toggle");
catTogglers.forEach(function (catToggle) {
catToggle.addEventListener("click", function () {
catToggle.classList.toggle("category-menu__toggle--open");
});
});
编辑:
我尝试过使用它,但它使用.category-submenu类切换所有元素上的类:
const catTogglers = document.querySelectorAll('.category-menu__toggle');
const subMenus = document.querySelectorAll('.category-submenu');
catTogglers.forEach(function(catToggle) {
catToggle.addEventListener('click', function() {
catToggle.classList.toggle('category-menu__toggle--open');
subMenus.forEach(function(subMenu) {
subMenu.classList.toggle('category-submenu--open');
});
});
});
解决方案
如果我理解正确的话,你想在按钮处切换孩子的班级,对吧?
如果是这样,您可以通过以下方式找到孩子
catToggle.addEventListener('click', function() {
const child = catToggle.querySelectorAll('.bar.bar--one')[0]
child.classList.toggle('new-child-class')
catToggle.classList.toggle('category-menu__toggle--open')
});
推荐阅读
- mysql - MySql根据group by对查询的行进行编号
- typescript - 我可以确保其他人不会使用相同的参数调用某个函数吗?
- vbscript - ADODB.Stream 块是否与 Response.Buffer 冲突?
- javascript - 在多维 JavaScript 数组中动态保存 Smarty 值
- android - 使用 exoplayer 从 azure 媒体服务获取令牌的 Widevine 离线许可证
- java-8 - java - 如何通过在java中迭代一个没有重复的列表来过滤记录?
- r - 如何为 rstanarm 中的 stan_lmer 多级模型指定信息先验?
- git - git pull 返回警告:监听端口 52698 的远程端口转发失败
- flutter - Flutter 将 NestedScrollView 添加到 SliverChildListDelegate 并出现 RenderFlex 错误
- python - 提高数据预处理速度 - Python 中的正则表达式