取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法
場(chǎng)景
我在一個(gè)div中生成的是一個(gè)多級(jí)列表，需要多次點(diǎn)擊列表，找到對(duì)應(yīng)的列表項(xiàng)，而Bootstrap默認(rèn)在dropdown-menu中點(diǎn)擊一次就會(huì)消失。
點(diǎn)擊右側(cè)的按鈕，彈出一個(gè)多級(jí)列表
代碼如下：
<div class="dropdown">
<a href="#" rel="external nofollow" data-toggle="dropdown">
<i class="fa fa-cog fa-2x"> </i>
</a>
<div class="dropdown-menu jq22-container">
<div id="treeview" class=""></div>
</div>
</div>
解決辦法
第一步
在dropdown-menu中的需要處理的元素添加 data-stopPropagation=”true”，data-stopPropagation屬性是用來對(duì)點(diǎn)擊時(shí)停止傳播事件，這樣我們的點(diǎn)擊事件就不會(huì)傳播給Bootstrap.js中去了。
第二步
調(diào)用Bootstrap的stopPropagation()函數(shù)，可以阻止元素點(diǎn)擊時(shí)停止傳播事件。
我在我的代碼中寫的比較粗暴，對(duì)整個(gè)treeview聲明一個(gè)click事件，并且全部綁定上stopPropagation()方法。
$(".treeview").on("click",function (e) {
e.stopPropagation();
})
以上這篇取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap面板（Panels）的簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap面板（Panels）的簡(jiǎn)單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Javascript中實(shí)現(xiàn)trim()函數(shù)的兩種方法
這篇文章主要介紹了Javascript中實(shí)現(xiàn)trim()函數(shù)的兩種方法,本文直接給出實(shí)現(xiàn)代碼和使用方法,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)tab欄切換制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了package.json中homepage屬性的作用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
js字符串轉(zhuǎn)換成數(shù)字與數(shù)字轉(zhuǎn)換成字符串的實(shí)現(xiàn)方法
本篇文章主要是對(duì)js字符串轉(zhuǎn)換成數(shù)字與數(shù)字轉(zhuǎn)換成字符串的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
JavaScript中常用數(shù)據(jù)處理函數(shù)groupBy的用法詳解
數(shù)據(jù)處理與分析中,對(duì)數(shù)據(jù)進(jìn)行分組是非常常見的功能,不論是實(shí)際工作中,還是在面試的場(chǎng)景中應(yīng)用十分廣泛,尤其在函數(shù)式編程中?groupBy?十分常見,下面我們就來學(xué)習(xí)一下groupBy的用法吧2023-12-12
這篇文章主要介紹了JS ES6異步解決方案，對(duì)異步感興趣的同學(xué)，可以參考下2021-04-04
這篇文章主要介紹了詳解瀏覽器渲染頁(yè)面過程的相關(guān)資料,需要的朋友可以參考下2017-02-02
在學(xué)習(xí)的時(shí)候，有時(shí)候看到一些一些網(wǎng)站的圖片是經(jīng)過壓縮處理的，因?yàn)閴嚎s之后的圖片會(huì)節(jié)省一部分你的內(nèi)存空間，這樣的話也可以提升性能，于是就比較好奇這是如何實(shí)現(xiàn)的，今天我們就簡(jiǎn)單的實(shí)現(xiàn)一下,需要的朋友可以參考下2023-06-06
bootstrap datetimepicker日期插件超詳細(xì)使用方法介紹
本篇文章主要介紹了bootstrap datetimepicker日期插件超詳細(xì)使用方法介紹，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02