Question

我正在尝试做我认为会很简单的隐藏/显示操作。如果选中此框，则显示文本，如果未选中，则文本被隐藏。我似乎无法正常工作。我感谢任何见识。谢谢

.nav-trigger:checked ~ .Nav-Wrap {
    display: block;
}

.Nav-Wrap {
    display: none; 
}

<div id="menuButton">
    <input title="Display Menu" type="checkbox" name="displayMenu" value="yes" id="nav-trigger" class="nav-trigger" />
    <label title="Display Menu" for="nav-trigger"></label>
</div>
<p class="Nav-Wrap">Test</p>

Answer 1

您的选择器.nav-trigger:checked ~ .Nav-Wrap与您当前的标记不匹配。尝试将p放在div内，这应该可以解决问题

.nav-trigger:checked ~ .Nav-Wrap {
    display: block;
}

.Nav-Wrap {
    display: none; 
}

<div id="menuButton">
    <input title="Display Menu" type="checkbox" name="displayMenu" value="yes" id="nav-trigger" class="nav-trigger" />
    <label title="Display Menu" for="nav-trigger"></label>
    <p class="Nav-Wrap">Test</p>   
</div>

使用复选框隐藏/显示

1 个答案: