Click to Expand
实现过程:
#div作为一个容器包裹所有标签
#input[type=checked]标签用于标识checked 和unchecked 属性,元素是隐藏的
#label标签用于触发下拉菜单
#ul为菜单列表
我们只需要checkbox元素的伪类选择器:checked就可以检测到元素的checked状态,通过label标签来触发checkbox的unchecked 和checked 状态。首先把checkbox隐藏
input[type=checkbox]{ display: none;}
同时,我们也把ul默认隐藏掉,当触发菜单时才会显示。
ul{ display: none;}
通过结合:checked选择器 和相邻同胞选择器~ 来控制对应的菜单的显示状态。
input[type=checkbox]:checked ~ ul { display: block}
当checkbox为选中状态时,下拉菜单就显示,否则隐藏。
demo:
demo.zip
Copyright © 2019- azee.cn 版权所有 赣ICP备2024042794号-5
违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务