Html
    Css
    Js

    
                        
#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调用版本:1.8.3
 立即下载

简洁方便的浮动侧边栏

对于动态创建的元素,在绑定事件的时候,需要使用jQuery的on方法来绑定事件,利用事件机制实现绑定事件阻止事件的默认行为,和事件冒泡,防止重复触发事件

0