选择复选框元素时没有关闭下拉菜单？

Question

这是一个简单的问题.我正在使用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>

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

Answer 1

您只需要防止事件冒泡:

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

dropdown-menu您的下拉列表在哪里,您可以指定另一个或使用ID.它的工作原理是Bootrstrap侦听根元素上的click事件body,以便在您单击页面时关闭弹出窗口.由于事件冒泡,click事件body会将DOM树向上传播到除非您停止使用stopPropagation方法执行此操作.

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