解決bootstrap中下拉菜單點(diǎn)擊后不關(guān)閉的問(wèn)題
更新時(shí)間：2018年08月10日 10:37:40 作者：coding_forever
今天小編就為大家分享一篇解決bootstrap中下拉菜單點(diǎn)擊后不關(guān)閉的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
bootstrap中常用到的下拉菜單dropdown-menu默認(rèn)是當(dāng)點(diǎn)擊下拉菜單的任一位置就會(huì)關(guān)閉下拉菜單框了，這顯然達(dá)不到很多用戶(hù)需求，如何實(shí)現(xiàn)當(dāng)點(diǎn)擊需要點(diǎn)擊的地方后才關(guān)閉下拉框呢，下面來(lái)簡(jiǎn)單介紹下方法，比如要做一個(gè)下拉框篩選查詢(xún)，下拉菜單展示圖如下：
解決方法：
指定要操作的元素的click事件停止傳播—定義屬性值data-stopPropagation的元素點(diǎn)擊時(shí)停止傳播事件
//下拉框查詢(xún)組件點(diǎn)擊查詢(xún)欄時(shí)不關(guān)閉下拉框
$("body").on('click','[data-stopPropagation]',function (e) {
e.stopPropagation();
});
之后在你需要點(diǎn)擊不關(guān)閉的標(biāo)簽下加上該屬性data-stopPropagation=”true”即可。
<div class="supplier_search_category dropdown-header" id="supplier_search_li" data-stopPropagation="true"> 查詢(xún)：<input type="text" id="category_search_text" class="search_text"/> </div>
以上這篇解決bootstrap中下拉菜單點(diǎn)擊后不關(guān)閉的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
javascript中的Function.prototye.bind
這篇文章主要介紹了javascript中的Function.prototye.bind的相關(guān)資料,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了javascript數(shù)組去重方法,通過(guò)2個(gè)示例對(duì)比分析了javascript數(shù)組去重的原理與操作技巧,需要的朋友可以參考下2016-12-12
用Javascript讀取中文COOKIE的解決辦法...2007-02-02
JavaScript實(shí)現(xiàn)鼠標(biāo)滑過(guò)圖片變換效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)滑過(guò)圖片變換效果的方法,涉及javascript控制鼠標(biāo)事件及樣式變換的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了js面向?qū)ο蠓绞綄?shí)現(xiàn)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
JS如何將秒數(shù)轉(zhuǎn)化為時(shí)分秒的形式
在實(shí)際工作中經(jīng)常會(huì)遇見(jiàn)把秒數(shù)轉(zhuǎn)化為時(shí)分秒的問(wèn)題,如何處理呢?下面這篇文章主要給大家介紹了關(guān)于JS如何將秒數(shù)轉(zhuǎn)化為時(shí)分秒形式的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Javascript實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
基于prototype擴(kuò)展的JavaScript常用函數(shù)庫(kù)
基于prototype擴(kuò)展的JavaScript常用函數(shù)庫(kù)實(shí)現(xiàn)代碼，學(xué)習(xí)js的朋友可以參考下。2010-11-11
js、jquery實(shí)現(xiàn)列表模糊搜索功能過(guò)程解析
這篇文章主要介紹了js、jquery實(shí)現(xiàn)列表模糊搜索功能過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03
echarts自定義tooltip中的內(nèi)容代碼示例
在ECharts中,通過(guò)formatter函數(shù)自定義圖例樣式,可以實(shí)現(xiàn)更靈活的圖表展示,滿(mǎn)足特定的視覺(jué)需求,這篇文章主要介紹了echarts自定義tooltip中內(nèi)容的相關(guān)資料,需要的朋友可以參考下2024-10-10