html - 如何使用复选框制作类显示块
问题描述
我可以让它工作。它适用于 toggle:checked {display: none} 但不适用于额外的类。
<nav>
<div class="nav">
<label class="hamburger__menu" for="toggle">☰</label>
<input class="toggle" type="checkbox" id="toggle">
</div>
<div class="menu-box">
<ul class="menu">
<li class="menu__item"><a class="item__link" href="#">home</a></li>
<li class="menu__item menu__item--yellow"><a class="item__link" href="#">humo@festivals</a></li>
<li class="menu__item"><a class="item__link" href="#">humor</a></li>
<li class="menu__item menu__item--red"><a class="item__link" href="#">video</a></li>
<li class="menu__item"><a class="item__link" href="#">fotospecials</a></li>
<li class="menu__item"><a class="item__link" href="#">nu in humo</a></li>
<li class="menu__item"><a class="item__link" href="#">tv/film</a></li>
<li class="menu__item"><a class="item__link" href="#">actua</a></li>
<li class="menu__item"><a class="item__link" href="#">muziek</a></li>
<li class="menu__item"><a class="item__link" href="#">boeken</a></li>
<li class="menu__item"><a class="item__link" href="#">humo sapiens</a></li>
</ul>
</div>
</nav>
.menu {
display: none;
}
.toggle {
display: none;
&:checked + .menu {
display: block;
}
}
解决方案
这是一个链接,指向某人如何仅使用 css https://codepen.io/erikterwan/pen/EVzeRP
但是javascript要容易得多
function toggle(){
var menu = document.getElementsByClassName('menu')[0];
if(menu.style.display==='')menu.style.display='block';
else if(menu.style.display==='block')menu.style.display='';
}
.menu {
display:none;
}
<nav>
<div class="nav">
<label class="hamburger__menu" onclick='toggle()'>☰</label>
</div>
<div class="menu-box">
<ul class="menu">
<li class="menu__item"><a class="item__link" href="#">home</a></li>
<li class="menu__item menu__item--yellow"><a class="item__link" href="#">humo@festivals</a></li>
<li class="menu__item"><a class="item__link" href="#">humor</a></li>
<li class="menu__item menu__item--red"><a class="item__link" href="#">video</a></li>
<li class="menu__item"><a class="item__link" href="#">fotospecials</a></li>
<li class="menu__item"><a class="item__link" href="#">nu in humo</a></li>
<li class="menu__item"><a class="item__link" href="#">tv/film</a></li>
<li class="menu__item"><a class="item__link" href="#">actua</a></li>
<li class="menu__item"><a class="item__link" href="#">muziek</a></li>
<li class="menu__item"><a class="item__link" href="#">boeken</a></li>
<li class="menu__item"><a class="item__link" href="#">humo sapiens</a></li>
</ul>
</div>
</nav>
推荐阅读
- pandas - 标题:以 mm/dd/yyyy 格式创建日期范围
- spring - Spring STS 3.9.7 跳过安装过程并打开工作区
- javascript - Javascript在特定时间更改文本阴影方向
- node.js - 为什么在使用 shelljs 克隆 git repo 时会出现 NullReferenceException?
- postgresql - PostgreSQL 10 => 11.1 关于 Brew 更新问题
- excel - Excel VBA 创建 Outlook 电子邮件规则以将传入邮件移动到特定文件夹
- csv - Microsoft SSIS - 将带有多个逗号 (,) 且没有双引号 (") 的平面文件 (.csv) 加载到 SQL Server 表中
- html - 更改布局时防止 CSS Fade
- python - 在 python 中读取文件:json.decoder.JSONDecodeError
- ios - 管理音频实例以允许交叉淡入淡出等的最佳策略