<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>bootstrap4实现侧边导航栏带隐藏按钮</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
.nonav{
width: 0px !important;
}
.ce_nav{
position: relative;height: 500px;background: #e6dfdf;width: 200px;float: left;transition:width 1s;-webkit-transition:width 1s;
}
</style>
</head>
<body>
<nav style="height: 60px;background-color: #333;"></nav>
<header>
<div class="container">
</div>
</header>
<br>
<div class="container">
<div class="ce_nav" style="">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">个人中心</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">个人资料</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">内容管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">收益广场</a>
</li>
</ul>
</div>
<button type="button" class="" style="color: red;z-index:9999;position: fixed;top: 40%">隐藏</button>
<div style="height: 500px;background: #cea9e4">
<p></p>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
console.log("11");
var isClosed=0;
$("button").click(function(){
$(".ce_nav").addClass('nonav');
$(".flex-column").addClass('d-none');
if (isClosed==0) {
$(".ce_nav").addClass('nonav');
$(".flex-column").addClass('d-none');
isClosed=1;
}else{
$(".ce_nav").removeClass('nonav');
$(".flex-column").removeClass('d-none');
isClosed=0;
}
})
})
</script>
</body>
</html>
bootstrap4实现侧边导航栏带隐藏按钮
1星 需积分: 41 33 浏览量
2018-12-09
18:22:44
上传
评论 4
收藏 51KB ZIP 举报 
bootstrap4实现侧边导航栏带隐藏按钮.zip （3个子文件） 
bootstrap4实现侧边导航栏带隐藏按钮 
index.html 2KB js 
jquery-3.3.1.min.js 85KB css bootstrap.min.css 138KB资源评论
dali20002020-03-26一般，不值这个价，1c币还差不多
K先生的守护2020-04-15其实我设置得是2c币，但csdn自己会涨价没办法啊，代码很简单但却很实用啊
