Bootstrap v4：防止双击崩溃

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 为防止这种情况，我找到了一种在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! 任何帮助表示赞赏！

Answer 1

Solved 解决了

Robert C (thanks!) mentioned my use of different versions of jQuery. Robert C（谢谢！）提到了我使用不同版本的jQuery的情况。

The solution was to use the normal full jQuery package instead of the slim package. 解决方案是使用普通的完整jQuery软件包而不是slim软件包。

Bootstrap v4：防止双击崩溃

问题描述

Problem: 问题：

Possible solution: 可能的解决方案：

... but... ...但是...

1 个解决方案

解决方案1
0 已采纳 2017-11-02 13:16:45

Solved 解决了

Bootstrap v4：防止双击崩溃

问题描述

Problem: 问题：

Possible solution: 可能的解决方案：

... but... ...但是...

1 个解决方案

解决方案1 0 已采纳 2017-11-02 13:16:45

Solved 解决了

解决方案1
0 已采纳 2017-11-02 13:16:45