解决

Question

问题：

当使用复选框触发折叠元素时，可以通过在折叠元素的转换结束前双击复选框来中断它。

可能的解决方案：

为了防止我在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>

感谢任何帮助！

Answer 1

解决

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

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

Bootstrap v4：双击防止崩溃

问题：

可能的解决方案：

......但......

1 个答案:

解决