#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方法来绑定事件,利用事件机制实现绑定事件阻止事件的默认行为,和事件冒泡,防止重复触发事件