【发布时间】：2018-02-04 21:22:27
【问题描述】：
所以我正在尝试制作一个漂亮的侧边栏，我希望它在单击旁边的按钮时可以展开/伸缩，有点像 bitbucket 菜单。但是，当我尝试此操作时，充当按钮的 div 只能在我的横幅图像旁边单击，而在其他任何地方都无法单击。我不知道是什么原因造成的。 有什么想法吗？
此外，当我删除图像时，整个 div 变得无法点击。
这是我的代码： （需要本地 bootstrap4、popperjs 和 jquery）
home.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap4/bootstrap.min.css">
<link rel="stylesheet" href="css/webpage.css">
<meta charset="UTF-8">
<title>Home page</title>
</head>
<body>
<div id="wrapper">
<!--Sidebar-->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><a href="#">Account</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
<div id="menu-toggle"></div>
<!--Page content-->
<img id="banner" class="img-fluid" src="images/DNA-strand.png" alt="banner"/>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Sidebar Layouts are ok</h1>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
<p>I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.I love apple pie.
I love apple pie.I love apple pie.I love apple pie.I love apple pie.</p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="js/jquery/jquery-3.3.1.min.js"></script>
<!-- Popper JS -->
<script src="js/popperjs/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="js/bootstrap4/bootstrap.min.js"></script>
<!--Menu toggle script-->
<script>
$(document).ready(function() {
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
});
</script>
</body>
</html>
网页.css：
/** { padding: 0; margin: 0; }*/
/*html, body, .full-height {*/
/*min-height: 100vh !important;*/
/*height: 100vh !important;*/
/*}*/
html, body {
height: 100%;
}
body {
display: flex;
}
/* Banner image */
#banner {
object-fit: none; /* Do not scale the image */
object-position: center; /* Center the image within the element */
min-height: 40%;
max-height: 40%;
height: 40%;
width: 100%;
padding-left: 20px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/* Sidebar */
#sidebar-wrapper {
z-index: 1;
position: fixed;
flex: 1;
width: 0;
min-height: 100%;
height: 100%;
overflow-y: hidden;
background: #2C3E50;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/* sidebar button */
#menu-toggle {
background: #395168;
padding-left: 0;
position: fixed;
height: 100%;
width: 20px;
text-decoration: none;
flex: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/* Main content */
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 30px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
flex: 1;
}
/* Change the width of the sidebar to display it */
#wrapper.menuDisplayed #sidebar-wrapper {
width: 250px;
}
/* Fix page content to not be overlapped by menu */
#wrapper.menuDisplayed #page-content-wrapper {
padding-left: 270px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/* Fix page banner to not be overlapped by menu */
#wrapper.menuDisplayed #banner {
padding-left: 270px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/* Fix menu button to not be overlapped by menu */
#wrapper.menuDisplayed #menu-toggle {
padding-left: 270px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/* Sidebar styling */
.sidebar-nav {
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #ddd;
}
.sidebar-nav li a:hover {
background: #16A085;
}
【问题讨论】：