【问题标题】：Bootstrap v4: Prevent collapse on double clickBootstrap v4：防止双击折叠
【发布时间】：2017-11-02 12:41:19
【问题描述】：

问题：

当使用复选框触发折叠元素时，可以在折叠元素的过渡结束之前通过双击复选框来破坏它。

可能的解决方案：

为了防止我在 Codeply 上测试代码时发现了一个 solution：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>

感谢任何帮助！

【问题讨论】：

您的测试代码使用的 jQuery 版本与此处提供的代码不同，您是否检查过是否是问题所在？
我认为您正在做某事，@RobertC。这似乎不是因为版本差异。但是我确实从 jquery-3.2.1.slim.min.js 更改为 jquery-3.2.1.min.js 并且这似乎有效！知道为什么吗？谢谢。
@Mads jQuery slim 和 jQuery 是两个不同的库。
@MasterYoda 我知道，很抱歉我的混乱评论。我以为罗伯特的意思是版本号:)

标签： javascript jquery html twitter-bootstrap bootstrap-4

【解决方案1】：

已解决

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

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

【讨论】：