解決bootstrap中下拉菜單點擊后不關(guān)閉的問題
更新時間：2018年08月10日 10:37:40 作者：coding_forever
今天小編就為大家分享一篇解決bootstrap中下拉菜單點擊后不關(guān)閉的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
bootstrap中常用到的下拉菜單dropdown-menu默認是當點擊下拉菜單的任一位置就會關(guān)閉下拉菜單框了，這顯然達不到很多用戶需求，如何實現(xiàn)當點擊需要點擊的地方后才關(guān)閉下拉框呢，下面來簡單介紹下方法，比如要做一個下拉框篩選查詢，下拉菜單展示圖如下：
解決方法：
指定要操作的元素的click事件停止傳播—定義屬性值data-stopPropagation的元素點擊時停止傳播事件
//下拉框查詢組件點擊查詢欄時不關(guān)閉下拉框
$("body").on('click','[data-stopPropagation]',function (e) {
e.stopPropagation();
});
之后在你需要點擊不關(guān)閉的標簽下加上該屬性data-stopPropagation=”true”即可。
<div class="supplier_search_category dropdown-header" id="supplier_search_li" data-stopPropagation="true"> 查詢：<input type="text" id="category_search_text" class="search_text"/> </div>
以上這篇解決bootstrap中下拉菜單點擊后不關(guān)閉的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了console.log()的作用與實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
微信小程序云開發(fā)實現(xiàn)云數(shù)據(jù)庫讀寫權(quán)限
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)實現(xiàn)云數(shù)據(jù)庫讀寫權(quán)限，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了JS防止網(wǎng)頁被嵌入iframe框架的方法,結(jié)合實例形式分析了針對不同瀏覽器防止網(wǎng)頁被嵌入框架的相關(guān)注意事項與操作技巧,需要的朋友可以參考下2016-09-09
本文通過實例代碼給大家詳細介紹了使用cookie繞過驗證碼登錄的實現(xiàn)方法，需要的朋友參考下吧2017-10-10
這篇文章主要介紹了微信小程序畫布顯示圖片繪制矩形選區(qū)效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-05-05
Chrome瀏覽器的alert彈窗禁止再次彈出后恢復(fù)的方法
本文主要介紹了Chrome瀏覽器的alert彈窗禁止再次彈出后恢復(fù)的方法。具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了用javascript寫了一個模擬閱讀小說的程序,需要的朋友可以參考下2014-04-04
又到了金三銀四的季節(jié)了,面試的各位同學(xué)要開始準備起來了,今天主要分享一個在面試中經(jīng)常被提到的一個面試題：倒計時,希望對大家有所幫助2024-03-03
這篇文章主要為大家詳細介紹了OpenLayers3實現(xiàn)測量功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
Bootstrap DateTime Picker日歷控件簡單應(yīng)用
這篇文章主要介紹了Bootstrap DateTime Picker日歷控件的簡單應(yīng)用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03