CSS实现Label触发toggle-content类切换失效求助（无JS/JQuery）

核心问题 #

1. 错误的checkbox元素类型：你用<div>标签模拟checkbox，这不符合HTML规范——只有<input type="checkbox">才能触发:checked伪类，div标签没有这个交互特性。
2. CSS选择器匹配失败：你的选择器.hidden-checkbox:checked + .toggle-content要求toggle-content是checkbox的直接相邻兄弟元素，但当前HTML结构里，不仅checkbox元素本身错误，结构上也无法让选择器正确命中目标。

修正步骤 #

步骤1：替换为原生checkbox元素 #

把错误的<div type="checkbox">改成真正的复选框输入元素：

<input type="checkbox" id="toggleVendors" class="hidden-checkbox" />

步骤2：调整checkbox的隐藏样式 #

原来的display: block会显示原生复选框，改成不影响交互的隐藏方式：

.hidden-checkbox {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

用绝对定位+透明度过掉display: none，避免打断label和input的关联交互。

步骤3：调整HTML结构确保选择器生效 #

让toggle-content成为checkbox的直接相邻兄弟，结构调整后如下：

<div>
    <label for="toggleVendors" class="label-toggle form-control">
        click here
    </label>
    <input type="checkbox" id="toggleVendors" class="hidden-checkbox" />
    <div class="toggle-content">
        <ul>
            <li><input type="checkbox" id="1" />one</li>
            <li><input type="checkbox" id="2" />two</li>
            <li><input type="checkbox" id="3" />three</li>
        </ul>
    </div>
</div>

完整修正后的代码 #

CSS代码

/* 隐藏原生checkbox */
.hidden-checkbox {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

/* 要显示/隐藏的元素 */
.toggle-content {
    display: none;
    z-index: 2;
    position: absolute;
    background-color: dimgrey;
    color: white;
    border: 1px solid black;
    border-radius: 5px;
    padding: 3px;
}

/* 触发标签样式 */
.label-toggle {
    cursor: pointer;
}

/* 复选框选中时显示内容 */
.hidden-checkbox:checked + .toggle-content {
    display: block;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    max-height: 100px;
    padding-right: 10px
}

li {
    padding-top: calc(var(--bs-gutter-y)* -1);
    padding-right: calc(var(--bs-gutter-x)* -.5);
    padding-left: calc(var(--bs-gutter-x)* -.5);
    font-size: small;
}
li:hover {
    background-color: darkgrey;
}

HTML代码

<div>
    <label for="toggleVendors" class="label-toggle form-control">
        click here
    </label>
    <input type="checkbox" id="toggleVendors" class="hidden-checkbox" />
    <div class="toggle-content">
        <ul>
            <li><input type="checkbox" id="1" />one</li>
            <li><input type="checkbox" id="2" />two</li>
            <li><input type="checkbox" id="3" />three</li>
        </ul>
    </div>
</div>

额外说明 #

• 用opacity: 0和pointer-events: none隐藏checkbox，比display: none更可靠，不会破坏label与input的关联。
• 合并了分散的border属性写法，简化为border: 1px solid black，代码更简洁。

内容的提问来源于stack exchange，提问作者bilpor