我们在使用bootstrap下拉框组件时，有时会有如下需求，比如，下拉框中有分页的需求，如果你点击翻页时那下拉框会自动关闭，再打开下拉框又会重新刷新，这肯定是不满足条件的。所以就会有点击后不关闭的需求。这种需求实现的方法其实不难，就两个步骤：
第一步：在你需要点击后不关闭的组件的标签中加入一个属性：data-stopPropagation="true",例如：

<ul class="dropdown-menu" role="menu" id="channel-menu">
                            <li class="divider"></li>
                            <li id="paging">
                                <ul class="pagination pagination-sm" style="margin: 0 0;">
                                    <li><a href="#" id="previous" data-stopPropagation="true" onclick="prevPage()">&laquo;</a></li>
                                    <!-- <li><a href="#" data-stopPropagation="true">1</a></li>
                                    <li><a href="#" data-stopPropagation="true">2</a></li>
                                    <li><a href="#" data-stopPropagation="true">3</a></li>
                                    <li><a href="#" data-stopPropagation="true">4</a></li> -->
                                    <li><a href="#" id="next" data-stopPropagation="true" onclick="nextPage()">&raquo;</a></li>
                                </ul>
                            </li>
                        </ul>

此段代码就是一个下拉框组，在下拉框中有分页设置，在分页部分的每个标签中都添加了data-stopPropagation="true"这个属性。这只是第一步，第二步也很简单。
第二步：在js代码中注册一个监听器，监听具有这个data-stopPropagation属性的标签，点击时不关闭，代码如下：

$("ul.dropdown-menu").on("click", "[data-stopPropagation]",function(e) {  
        e.stopPropagation();  
    });

这时再去尝试下发现点击后下拉框组不会自动关闭，大功告成。