jquery - JQUERY $(document).click vs $(document).ready
问题描述
$(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
条件绑定到单击事件。
推荐阅读
- javascript - 如何为javascript调用JSON文件中的新数据
- python - DJANGO Rest API - 方法 POST 不允许
- php - 在php中将列转置为行
- python - 类型错误:+= 不支持的操作数类型:“int”和“str”
- json - 如何将json数组作为字符串从邮递员传递给web api
- javascript - 用php创建remmember me cookie
- video - FFmpeg 将视频解码为无损帧硬件加速 CUDA
- python-3.x - 如何使用 csv 文件或文本文件(不使用 pandas)将网络抓取的数据转换为表格格式
- javascript - 顶级等待在 Node JS 14.15.3 中不起作用
- powershell - Powershell - 邮件消息正文不会换行