这是我用于切换 div 的代码,我希望我的名为 #credits 的 div 在单击文档的其他部分时应该切换,此代码运行完美但存在一个问题,即当我单击此 div 的形式时,时间它也切换。请帮我阻止它。
$(document).ready(function() {
$('#add_stu').click(function() {
$('#credits').slideToggle("slow");
});
$(document).click(function(e) {
if (!$(e.target).parents().andSelf().is('#add_stu')) {
$("#credits").slideUp("slow");
}
});
});
#credits {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary pull-right " id="add_stu" style="margin-bottom: 10px;"><b>Add Student</b>
</button>
<div id="credits" class="bg-white padded poop text-center">
<!-- The user image in the menu -->
<form action="#" class="form-horizontal">
<div class="form-group field_wrapper text-center">
<div>
<input class="form-control " placeholder="First Name" type="text" value="">
</div>
</div>
<div class="form-group field_wrapper text-center">
<div>
<input class="form-control " placeholder="Last Name" type="text" value="">
</div>
</div>
<div class="form-group field_wrapper">
<select class="form-control">
<option selected value="val0">Add Student to a room</option>
<option value="val1">Room A</option>
<option value="val2">Room B</option>
<option value="val3">Room C</option>
</select>
</div>
<button class="btn btn-primary" type="submit" style="width:100%;">Create Student</button>
</form>
</div>
最佳答案
尝试以下条件:
使用 closest()
检查点击的元素是否不是按钮或 credits 元素的子元素
$(document).ready(function() {
$('#add_stu').click(function() {
$('#credits').slideToggle("slow");
});
$(document).click(function(e) {
if (!($(e.target).closest('#add_stu').length || $(e.target).closest('#credits').length)) {
$("#credits").slideUp("slow");
}
});
});
#credits {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary pull-right " id="add_stu" style="margin-bottom: 10px;"><b>Add Student</b>
</button>
<div id="credits" class="bg-white padded poop text-center">
<!-- The user image in the menu -->
<form action="#" class="form-horizontal">
<div class="form-group field_wrapper text-center">
<div>
<input class="form-control " placeholder="First Name" type="text" value="">
</div>
</div>
<div class="form-group field_wrapper text-center">
<div>
<input class="form-control " placeholder="Last Name" type="text" value="">
</div>
</div>
<div class="form-group field_wrapper">
<select class="form-control">
<option selected value="val0">Add Student to a room</option>
<option value="val1">Room A</option>
<option value="val2">Room B</option>
<option value="val3">Room C</option>
</select>
</div>
<button class="btn btn-primary" type="submit" style="width:100%;">Create Student</button>
</form>
</div>
关于jquery - 如何在完整文档上触发点击事件时忽略子字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40129539/