Bootstrap v4：防止雙擊崩潰

Question

問題：

使用復選框觸發折疊元素時，可以通過在折疊元素的轉換結束之前雙擊該復選框來使其中斷。

可能的解決方案：

為防止這種情況，我找到了一種在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>

任何幫助表示贊賞！

Answer 1

解決了

Robert C（謝謝！）提到了我使用不同版本的jQuery的情況。

解決方案是使用普通的完整jQuery軟件包而不是slim軟件包。

Bootstrap v4：防止雙擊崩潰

問題描述

問題：

可能的解決方案：

...但是...

1 個解決方案

解決方案1
0 已采納 2017-11-02 13:16:45

解決了

Bootstrap v4：防止雙擊崩潰

問題描述

問題：

可能的解決方案：

...但是...

1 個解決方案

解決方案1 0 已采納 2017-11-02 13:16:45

解決了

解決方案1
0 已采納 2017-11-02 13:16:45