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