Bootstrap v4: Prevent collapse on double click
Question
Problem:
When using a checkbox to trigger a collapse element, it is possible to break it by double clicking the checkbox before the transition of the collapse element ends.
Possible solution:
To prevent that I found a solution which works when I test the code on Codeply: http://codeply.com/go/pZSHpsna67
... but...
However, when I am using the same code in my project the collapse function stops working completely:
<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>
Any help is appreciated!
1 answers
solution1
0 ACCPTED 2017-11-02 13:16:45
Solved
Robert C (thanks!) mentioned my use of different versions of jQuery.
The solution was to use the normal full jQuery package instead of the slim package.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.