angularjs和jQuery实现侧边栏显示隐藏

最新推荐文章于 2021-01-31 22:37:12 发布

Zh.冠军

最新推荐文章于 2021-01-31 22:37:12 发布

阅读量206

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_38673922/article/details/106646357

版权

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于Bootstrap网格系统的可折叠侧边栏特效|DEMO2_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
	html,
	body {
		height: 100%;
	}
	#content,
	#sidebar {
		min-height: 500px;
	}
	#row-main {
		overflow-x: hidden; 
	}
	#content {
		padding-right:0;
		background-color: lightyellow;
		-webkit-transition: width 0.3s ease;
		-moz-transition: width 0.3s ease;
		-o-transition: width 0.3s ease;
		transition: width 0.3s ease;
	}
	.col-md-9 .width-12,
	.col-md-12 .width-9 {
		display: none; 
	}
	#sidebar {
		background-color: lightskyblue;
		border-left:1px solid #ccc;
		-webkit-transition: margin 0.3s ease;
		-moz-transition: margin 0.3s ease;
		-o-transition: margin 0.3s ease;
		transition: margin 0.3s ease;
	}
	.collapsed {
		display: none; 
	}
	@media (min-width: 992px) {
		.collapsed {
			display: block;
			margin-right: -25%; 
		}
	}
	#content p{
		float: right;
        cursor: pointer;
        font-size:14px;
        padding:10px;
        background-color: rgba(247, 247, 247, 1);
        border-color: rgba(204, 204, 204, 1);
        border-radius: 5px;
        border-top-right-radius: 0px!important;
        border-bottom-right-radius: 0px!important;   
        
        /*文字纵行显示*/
        layout-flow:vertical-ideo-graphic;
        writing-mode:tb-rl;
	}
	
	.row{
		margin-right: 0px;
	}
</style>
</head>
<body>

	<div class="row" id="row-main">
		<div class="col-md-9" id="content">
			<p class="toggle-sidebar">点击隐藏/显示</p>
		</div>
		<div class="col-md-3" id="sidebar">
			折叠侧边栏的实现
		</div>
	</div>
	<script>
		$(document).ready(function () {
			$(".toggle-sidebar").click(function () {
				$("#sidebar").toggleClass("collapsed");
				$("#content").toggleClass("col-md-9 col-md-12");
				return false;
			});
		});
	</script>
</body>
</html>

效果图
在这里插入图片描述

Zh.冠军

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs和jQuery实现侧边栏显示隐藏

<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基于Bootstr
复制链接

扫一扫