使用复选框隐藏/显示

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>