javascript - 使用多个下拉切换无法按预期工作
问题描述
我正在使用以下内容为多个 div 生成下拉字段,但就目前而言,每个生成的切换按钮只会打开第一个 div 的切换内容。
这是我目前正在使用的:
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: 1em;
}
.bio-title,
.bio-content {
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.2s;
}
.bio-title {
background: #fff;
padding: 1em;
display: block;
color: #7A7572;
font-weight: bold;
}
.bio-title:after,
.bio-title:before {
content: "";
position: absolute;
right: 1.25em;
top: 1.25em;
width: 2px;
height: 0.75em;
background-color: #7A7572;
transition: all 0.2s;
}
.bio-title:after {
transform: rotate(90deg);
}
.bio-content {
max-height: 0;
overflow: hidden;
background-color: #fff;
}
.bio-content p {
margin: 0;
padding: 0.5em 1em 1em;
font-size: 0.9em;
line-height: 1.5;
}
.toggle:checked+.bio-title,
.toggle:checked+.bio-title+.bio-content {
box-shadow: 3px 3px 6px #ddd, -3px 3px 6px #ddd;
}
.toggle:checked+.bio-title+.bio-content {
max-height: 500px;
}
.toggle:checked+.bio-title:before {
transform: rotate(90deg) !important;
}
<div class="option">
<input type="checkbox" id="toggle" class="toggle" />
<label class="bio-title" for="toggle">
Learn more
</label>
<div class="bio-content">
<p>Content</p>
</div>
</div>
<div class="option">
<input type="checkbox" id="toggle" class="toggle" />
<label class="bio-title" for="toggle">
Learn more
</label>
<div class="bio-content">
<p>Content</p>
</div>
</div>
我愿意使用 JavaScript 之类的东西,但最好只保留这个 CSS。后者甚至可能吗?
解决方案
最简单的解决方案是更改 ID。
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: 1em;
}
.bio-content {
max-height: 0;
overflow: hidden;
background-color: #fff;
transition: max-height 1s ease;
}
.toggle:checked+.bio-title+.bio-content {
max-height: 500px;
}
<div class="option">
<input type="checkbox" id="toggle" class="toggle" />
<label class="bio-title" for="toggle">
Learn more
</label>
<div class="bio-content">
<p>Content</p>
</div>
</div>
<div class="option">
<input type="checkbox" id="toggle2" class="toggle" />
<label class="bio-title" for="toggle2">
Learn more
</label>
<div class="bio-content">
<p>Content</p>
</div>
</div>
在您的情况下 - 因为嵌套的 DOM 选择器(尚)不受支持 - 您可以使用一个小的 JS 片段来实现相同的结果,而无需 ID。
function toggleTab(el) {
// Get the first .toggle element of the parent
const checkbox = el.parentNode.querySelector(':scope > .toggle');
// Toggle the checked state
checkbox.checked = !checkbox.checked;
}
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: 1em;
}
.bio-content {
max-height: 0;
overflow: hidden;
background-color: #fff;
transition: max-height 1s ease;
}
.toggle:checked+.bio-title+.bio-content {
max-height: 500px;
}
<div class="option">
<input type="checkbox" class="toggle" />
<label class="bio-title" onclick="toggleTab(this)">
Learn more
</label>
<div class="bio-content">
<p>Content</p>
</div>
</div>
<div class="option">
<input type="checkbox" class="toggle" />
<label class="bio-title" onclick="toggleTab(this)">
Learn more
</label>
<div class="bio-content">
<p>Content</p>
</div>
</div>
推荐阅读
- flutter - 溢出的注释文本不对齐
- javascript - 如何访问对象内部的地址并赋予它另一个值?
- c++ - 在 C 和 C++ 中比较不同符号的表达有什么危害?
- python - 想使用 python 从数据库中选择一个特定的字段,其中所需的字段名称由用户输入
- automata - L = {aa, bb, ba, baa, bba} 的花自动机
- vba - 如何跟踪在 Microsoft Access 中打开表的用户
- python - 严格递增子序列的最小数量
- javascript - 在 POST 参数中加载外部 JS 脚本(XSS 反射攻击)
- c# - Caliburn.Micro 点击事件查找图像点并计算距离
- r - 在ggplot2中连接两个不同轴上的连续和离散数据