1.减少js的使用，用html5+css3代替
原理是利用一个隐藏的多选框的条件选择符进行CSS的覆盖，配合css3的缓动效果
#sideToggle{ display:none; }
#sideToggle:checked + aside{ left:0; }
#sideToggle:checked ~ #wrap{ padding-left:220px; }
body > aside{ position:absolute; top:0; bottom:0; left:-200px; width:200px; background:#f1103a; transition:0.2s ease-out; -webkit-transition:0.2s ease-out; }
<body>
<input type=‘checkbox‘ id=‘sideToggle‘>
<aside><h2>Side Menu</h2></aside>
<div id=‘wrap‘>
<label id=‘sideMenuControl‘ for=‘sideToggle‘>=</label>
<p>HTML5/CSS3点击显示侧边框 </p>
</div>
</body>
时间： 2024-10-10 17:32:11