开发者社区> 道之若无> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

关于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();  
    });

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
bootstrap 非原生checkbox 导致上级tr 点击两次的问题 真tm坑 研究了好久
input[type=checkbox] + .lbl::before{ content:"N"; border:1px solid red; } input[type=checkbox]:checked + .
864 0
bootstrap 组件之 进度条 滚动监控 旋转加载 消息推送框 组件学习总结
bootstrap 组件之 进度条 滚动监控 旋转加载 消息推送框 组件学习总结
0 0
bootstrap 组件之分页 提示框 提示工具组件
bootstrap 组件之分页 提示框 提示工具组件
0 0
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
0 0
bootstrap 组件 之模态框组件
bootstrap 组件 之模态框组件
0 0
bootstrap 组件之 输入框组 超大屏幕 列表组件学习总结
bootstrap 组件之 输入框组 超大屏幕 列表组件学习总结
0 0
bootstrap 组件之表单 组件学习总结
bootstrap 组件之表单 组件学习总结
0 0
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
0 0
bootstrap 组件之卡片总结
bootstrap 组件之卡片总结
0 0
+关注
道之若无
java开发工程狮一枚
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载