#left-panel { width:30%; /* height:90%; */ overflow:auto; background-color:#fff; } li { list-style:none; overflow:hidden; } * { margin:0; padding:0; } .clearfix:before,.clearfix:after { display:table; content:" "; } .clearfix:after { clear:both; } /* 开关 */ .switch-on { left:33%; } .switch { box-shadow:0 1px 3px rgba(0,0,0,0.2); position:absolute; top:72px; height:50px; width:22px; background:#fff; } .switch > .tips { left:30px; top:15px; position:absolute; width:75px; background:#000; opacity:0.6; color:#fff; font-size:12px; padding:2px 5px; border-radius:2px; text-align:center; } .switch-on:after { font-size:0; height:0; display:inline-block; line-height:0; margin:0 5px; width:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-right:4px solid #757575; left:5px; } .switch:after { content:""; position:absolute; top:20px; } .switch-off:after { font-size:0; height:0; display:inline-block; line-height:0; margin:0 5px; width:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:4px solid #757575; left:4px; } #left-panel ul li:hover { cursor:pointer; background-color:#f0f0f0; }
对于动态创建的元素,在绑定事件的时候,需要使用jQuery的on方法来绑定事件,利用事件机制实现绑定事件阻止事件的默认行为,和事件冒泡,防止重复触发事件