侧边导航栏的实现
参考大神代码，原文链接找不到了，侵删
直接贴吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#sidebar {
position: fixed;
top: 0;
right: 0;
width: 500px;
height: 100%;
background-color: #373737;
z-index: 9999;
transition: all 0.3s ease-in;
}
.showbar {
transform: translateX(0);
}
.hidebar{
transform: translateX(500px);
}
</style>
</head>
<body>
<button id="switch">switch</button>
<div id="sidebar" class="sidebar hidebar col-sm-4">
switch
</div>
<script type="text/javascript">
$("#switch").click(function() {
var sideBar = $("#sidebar");
if(sideBar.hasClass("showbar")) {
sideBar.addClass("hidebar").removeClass("showbar");
console.log("关");
} else {
sideBar.addClass("showbar").removeClass("hidebar");
console.log("开");
}
})
</script>
</body>
</html>
1009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
