关于bootstrap下拉框组件点击后不自动关闭的处理

道之若无 2018-04-17

前端与交互设计 javascript html5 class bootstrap

我们在使用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();  
    });

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

登录 后评论
下一篇
corcosa
13131人浏览
2019-10-08
相关推荐
常用的CSS框架
647人浏览
2018-03-04 10:34:00
Bootstrap<基础九>辅助类
523人浏览
2015-05-05 16:35:00
Selectize使用总结
1220人浏览
2017-11-17 18:00:00
0
0
0
1065