简单实现label控制div的展示与隐藏

背景

经常会用到局部div的隐藏与展示，但是很多时候不方便用JS来控制，那就用CSS来进行控制会比较合适一点。所以就可以已用label绑定checkbox，再由checkbox的状态来控制div的display属性的方法来实现。

代码

原理很简单，在需要隐藏和展示的div中定义隐藏和checkbox选中状态隐藏

css

.nav_mNav{display: none;}
#navController:checked~.nav_mNav{display: block;}

html

利用label的for属性绑定checkbox

<input type="checkbox" id="navController" name="navController" hidden>
<label for="navController">菜单</label>


<div class="nav_mNav">
    <div class="nav_mItem"><a href="#">菜单1</a></div>
    <div class="nav_mItem"><a href="#">菜单2</a></div>
    <div class="nav_mItem"><a href="#">菜单3</a></div>
    <div class="nav_mItem"><a href="#">菜单4</a></div>
    <div class="nav_mItem"><a href="#">菜单5</a></div>
  </div>

经常会用到局部div的隐藏与展示，但是很多时候不方便用JS来控制，那就用CSS来进行控制会比较合适一点。所以就可以已用label绑定checkbox，再由checkbox的状态来控制div的display属性的方法来实现。