html - 不关闭选择复选框元素的下拉菜单？

Question

这是一个简单的问题。我正在使用 Bootstrap v3.2.0 在导航栏下拉菜单上创建复选框列表。

我只是想知道是否有一种方法可以在单击每个复选框后不将复选框弹开。

我提供了 fiddle :http://jsfiddle.net/D2RLR/5649/

                    <div class="input-group">
                        <div class="input-group-btn">
                            <button tabindex="-1" class="btn btn-default" type="button">Select</button>
                            <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                            <span class="caret"></span>
                            </button>
                            <ul role="menu" class="dropdown-menu">
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl"> Every day</span>
                                </a></li>
                                <li class="divider"></li>
                                <li><a href="#">
                                <input type="checkbox">
                                <span class="lbl"> Monday</span>
                            </a></li>
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl">
                                Tuesday</span>
                                </a></li>
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl">
                                Wednesday</span>
                                </a></li>
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl">
                                Thursday</span>
                                </a></li>
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl">
                                Friday</span>
                                </a></li>
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl">
                                Saturday</span>
                                </a></li>
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl">
                                Sunday</span>
                            </a></li>
                                <li class="divider"></li>
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl"> Last Weekday in month</span>
</a></li>
                            </ul>
                        </div>
                        <input type="text" class="form-control">
                    </div>

将接受第一个正确的答案。

Answer 1

你只需要防止事件冒泡:

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

dropdown-menu 是您的下拉列表的一个类，您可以指定另一个或使用 id 代替。它起作用的原因是 Bootrstrap 监听根元素 body 上的点击事件，以便在您点击页面时关闭弹出窗口。由于事件冒泡，点击事件会在 DOM 树中向上传播到 body，除非您使用 stopPropagation 方法阻止它执行此操作。

演示:http://jsfiddle.net/D2RLR/7040/