[英]Bootstrap v4: Prevent collapse on double click
使用复选框触发折叠元素时,可以通过在折叠元素的转换结束之前双击该复选框来使其中断。
为防止这种情况,我找到了一种在Codeply上测试代码时可以使用的解决方案 : http ://codeply.com/go/pZSHpsna67
但是,当我在项目中使用相同的代码时,折叠功能将完全停止工作:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="container">
<div class="form-group">
<div class="row">
<div class="col-md-9 offset-md-3">
<label id="testCheckBox1" class="custom-control custom-checkbox" data-target="#collapseCommentator" aria-expanded="false" aria-controls="collapseCommentator">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">
<span class="font-weight-bold">Become a Live Commentator</span>
<br>Share your passion and knowledge! Contribute as a Live Commentator.
</span>
</label>
</div>
</div>
</div>
</div>
<!-- Collapsing Live Commentator-->
<div id="collapseCommentator" aria-expanded="false" class="collapse comm">
<div class="container">
<div class="row">
<div class="col-md-9 offset-md-3">
<div class="form-group">
<div class="row">
<div class="col-md-3">
<h6 class="text-uppercase">Language</h6>
</div>
<div class="col-md-6">
<div class="row">
<div class="col">
<div class="form-group">
<select class="custom-select form-control">
<option selected="">Choose language</option>
<option value="2">English</option>
<option value="3">Danish</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$("#testCheckBox1 :checkbox").bind('click dblclick', function(evt) {
console.log(evt.type);
if ($(this).is(":checked")) {
$('#collapseCommentator').slideDown('fast');
} else {
$('#collapseCommentator').slideUp('fast');
}
});
</script>
</body>
任何帮助表示赞赏!
Robert C(谢谢!)提到了我使用不同版本的jQuery的情况。
解决方案是使用普通的完整jQuery软件包而不是slim软件包。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.