JQ之简单的隐藏和显示侧边栏

红太狼 2022-04-13 14:30 305阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_16_color_FFFFFF_t_70][]

代码如下:

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			
    			.left {
    				position: absolute;
    				left: 0;
    				top: 0;
    				width: 300px;
    				height: 100%;
    				background: #123456;
    				transition: all 0.2s ease 0s;
    			}
    			
    			.right {
    				position: absolute;
    				/*绝对定位脱离文档流,基于relative或者浏览器*/
    				left: 300px;
    				right: 0;
    				/*left: 0;right: 0;//实现左右居中*/
    				/*left: 300;right: 0;//width的大小是从left300到右边浏览器结束，而不是根据子元素的width而改变*/
    				height: 100%;
    				background: #F5F5DC;
    				transition: all 0.2s ease 0s;
    			}
    			
    			.show .left {
    				left: -300px;
    			}
    			
    			.show .right {
    				left: 0;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="left">
    			<h1>侧边</h1>
    		<</div>
    		<div class="right">
    			<button id="btn">隐藏/显示</button>
    		</div>
    	</body>
    	<script type="text/javascript">
    		// 切换侧边栏
    		$("#btn").click(function() {
    			$("body").toggleClass("show");
    		});
    	</script>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_16_color_FFFFFF_t_70]: /images/20220413/fecb71c8724d405d9757e4bcae0f7311.png