选择复选框元素时不关闭下拉菜单？答案

【问题标题】：Not close dropdown on selection of a checkbox element?选择复选框元素时不关闭下拉菜单？
【发布时间】：2014-10-10 21:16:53
【问题描述】：

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

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

我提供了小提琴：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>

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

【问题讨论】：

标签： html twitter-bootstrap-3 navbar

【解决方案1】：

你只需要防止事件冒泡：

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

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

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

【讨论】：