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

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

相关文章
N..
|
8天前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
15 0
|
6月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
54 1
|
7月前
|
前端开发 容器
|
7月前
|
前端开发 容器
|
7月前
|
前端开发 开发者 容器
|
8天前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码
11 0
|
8天前
|
前端开发
bootstrap组件
bootstrap组件
18 0
|
7月前
|
前端开发
|
7月前
|
前端开发 JavaScript 容器
|
8天前
Bootstrap5 导航组件和面包屑
Bootstrap5 导航组件和面包屑
25 0

热门文章

最新文章