关于bootstrap下拉框组件点击后不自动关闭的处理-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

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

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

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章