$(document).ready(function(e) {
if ($('#sidebar').hasClass('active')) {
$('#dismiss, .overlay').on('click', function() {
$('#sidebar').removeClass('active');
$('.overlay').removeClass('active');
});
} else {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').addClass('active');
$('.overlay').addClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
}
});
.fixed-top {
z-index: 1 !important;
}
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: -250px;
height: 100vh;
z-index: 999;
background: #7386D5;
color: #fff;
transition: all 0.3s;
overflow-y: hidden;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
left: 0;
}
#dismiss {
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
background: #7386D5;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#dismiss:hover {
background: #fff;
color: #7386D5;
}
.overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.overlay.active {
display: block;
opacity: 1;
}
#sidebar .sidebar-header {
padding: 0px;
background: #6d7fcc;
text-align: center;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul ul ul a {
font-size: 0.7em !important;
padding-left: 40px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<nav id="sidebar">
<div class="sidebar-header">
<div id="dismiss">
<i class="fas fa-arrow-left"></i>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:#6d7fcc;">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Table Of Contents</span>
</button>
</div>
</nav>
<div class="overlay"></div>
使用此$(document).ready(function (e){...});
代码,我的打开侧栏的按钮正在工作,但解雇按钮不可用?
但是,如果将其更改为$(document).click(function (e) {...});
,它可以正常工作,但我必须首次按两次切换按钮才能打开侧边栏。为什么这样?
此外,在单击外面时可能会寻求帮助以关闭侧边栏吗?我有这个
$(document).click(function(e) {
if ($('#sidebar').('active') && !$(e.target).is('#sidebar')) {
$('#sidebar').removeClass('active');
$('.overlay').removeClass('active');
}
});
代码,但这并不能解决问题。
已经编辑了代码。我已经组织了引导文件的导入。
在您的代码if
中,在ready
状态
您需要移动代码以将侧边栏隐藏到if
条件外部,并且会起作用。
您可以检查#sidebar
是否具有click
功能中的活动类。
$('#dismiss, .overlay').on('click', function() {
if ($('#sidebar').hasClass('active')) {
$('#sidebar').removeClass('active');
$('.overlay').removeClass('active');
}
});
$('#sidebarCollapse').on('click', function() {
if (! $('#sidebar').hasClass('active')) {
$('#sidebar').addClass('active');
$('.overlay').addClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
}
});
或我们可以说您需要绑定if
条件才能单击事件。