JS模擬bootstrap下拉菜單效果實(shí)例
本文實(shí)例講述了JS模擬bootstrap下拉菜單效果。分享給大家供大家參考,具體如下:
模擬bootstrap下拉菜單
在工作中要切一個(gè)效果:點(diǎn)擊導(dǎo)航欄,則出現(xiàn)下列菜單,但是當(dāng)點(diǎn)擊其他地方的時(shí)候,就隱藏子菜單,效果有點(diǎn)類似于bootstrap 的“下拉菜單”
由于bootstrap的子菜單的樣式與設(shè)計(jì)不同,因此需要自己寫(xiě)一個(gè)類似的效果
當(dāng)點(diǎn)擊某個(gè)控件的時(shí)候,則顯示出下拉菜單,但是,當(dāng)點(diǎn)擊空白的地方的時(shí)候怎么讓其自動(dòng)隱藏呢?
起初的想法,給body綁定一個(gè)onclick事件,當(dāng)點(diǎn)擊空白的地方由于事件冒泡,觸發(fā)click body的事件,但是問(wèn)題來(lái)了,點(diǎn)擊控件的時(shí)候,同樣會(huì)觸發(fā)body的click事件,導(dǎo)致下拉菜單顯示出來(lái)之后,有被收縮回去了,因此這個(gè)思路不正確
由于bootstrap已經(jīng)實(shí)現(xiàn)了這個(gè)功能,查看其源代碼,找到了解決思路:
給document綁定事件(隱藏其子菜單),當(dāng)觸發(fā)控件的方法時(shí)則阻止其冒泡,不讓其觸發(fā)綁定
<!-- 篩選導(dǎo)航欄 --> <div class="border_b_bottom_3eee text-center width_40 float_left active" style="z-index: 999"> <div class="margin_bottom_10 margin_top_10 "> <span onclick="showOrHideItem(this,event)" class="title"> 分類 <span class="caret"></span> </span> <ul class="list-unstyled all_width sqh_absolute sqh_line_height_25 sqh_tmp_bj_ff border_b_bottom_eee sqh_position_top_100 sqh_position_left_0 display_none" data-show="hide" style="z-index: 999;"> <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee" onclick="jumpTo(this)" target="https://www.baidu.com"> <span class="float_left">家政</span> <span class="float_right icon iconfont sqh_line_height_15"></span> <span class="clearfix"></span> </li> <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee" onclick="jumpTo(this)" target="https://www.baidu.com"> <span class="float_left">蔬菜</span> <span class="float_right icon iconfont sqh_line_height_15"></span> <span class="clearfix"></span> </li> <li class=" margin_left_10 margin_right_10 sqh_pointer sqh_font_color_red" onclick="jumpTo(this)" target="https://www.baidu.com"> <span class="float_left">零食</span> <span class="float_right icon iconfont sqh_line_height_15"></span> <span class="clearfix"></span> </li> </ul> </div> </div> <div class="text-center border_b_bottom_3eee width_40 float_left"> <div class="margin_bottom_10 margin_top_10 border_b_right_eee"> <span onclick="showOrHideItem(this,event)" class="title"> 分類 <span class="caret"></span> </span> <ul class="list-unstyled all_width sqh_absolute sqh_line_height_25 sqh_tmp_bj_ff border_b_bottom_eee" data-show="hide" style="top:100%;left: 0px;z-index: 999;display: none"> <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee" onclick="jumpTo(this)" target="https://www.baidu.com"> <span class="float_left">家政1</span> <span class="float_right icon iconfont sqh_line_height_15"></span> <span class="clearfix"></span> </li> <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee sqh_font_color_red" onclick="jumpTo(this)" target="https://www.baidu.com"> <span class="float_left">蔬菜1</span> <span class="float_right icon iconfont sqh_line_height_15"></span> <span class="clearfix"></span> </li> <li class=" margin_left_10 margin_right_10 sqh_pointer" onclick="jumpTo(this)" target="https://www.baidu.com"> <span class="float_left">零食1</span> <span class="float_right icon iconfont sqh_line_height_15"></span> <span class="clearfix"></span> </li> </ul> </div> </div> <div class="text-right border_b_bottom_3eee text-center width_20 float_left"> <div class="margin_bottom_10 margin_top_10" onclick="showSearch(this,event)"> <span class="icon iconfont font_14 display_block padding_left_5"></span> </div> <!-- 顯示搜索框 --> <div class=" sqh_tmp_bj_ff"> <div class="sqh_absolute sqh_line_height_25 sqh_tmp_bj_ff search_cont" style="top:58%;right: 0px;z-index: 999;display: none;" data-search="hide"> <div class="margin_left_15 "> <div class="sqh_relative" style="margin-right: 80px;"> <span class="icon iconfont font_14 sqh_absolute padding_left_5" style="left: 0px;top:0px;"></span> <input class="in_search all_width padding_left_30 sqh_tmp_bj_f3 sqh_border_radius_20" placeholder="搜索" onclick="stopEvent(this,event)" type="text" value=""> </div> <div class="float_right" style="width: 80px;"> <button type="button" class="btn btn-e4005a" style="padding: 4px 12px;">搜索</button> </div> </div> </div> </div> </div> <script> $(function(){ //給document綁定事件 $(document).on("click",function(){ //找到控件是ul并且包含屬性data-show="show"的控件,如果有,則讓其隱藏起來(lái) $("ul[data-show='show']").slideUp("slow"); }); $(document).on("click",function(){ //找到控件是div并且包含屬性data-show="show"的控件,如果有,則修改其css屬性。 $("div[data-search='show']").css("display","none").css("width","32%"); }); }); //顯示或關(guān)閉篩選條件 function showOrHideItem(obj,event){ // alert(arguments.callee); // alert(showOrHideItem.caller); var $currentObj = $(obj); //隱藏所有的下拉列表 $("ul[data-show='show']").hide(); //清除所有active類 $currentObj.closest(".row").find("div.active").removeClass("active"); //給當(dāng)前div添加選中樣式 $currentObj.closest(".float_left").addClass("active") var $ul = $currentObj.closest("div").find("ul"); //ul是展開(kāi)狀態(tài) if($ul.data("show") == "show"){ $ul.slideUp("slow"); $ul.attr("data-show","hide"); }else{ //ul是展開(kāi)狀態(tài) $ul.slideDown("slow"); $ul.attr("data-show","show"); //阻止事件冒泡 event.stopPropagation(); } } //展示搜索框 function showSearch(obj,event){ var $currentObj = $(obj).closest(".float_left").find(".search_cont").css("display","block"); $currentObj.animate({ width: "100%" }, 1000 ); $currentObj.attr("data-search","show"); //阻止事件冒泡 event.stopPropagation(); } function stopEvent(obj,event){ //阻止事件冒泡 event.stopPropagation(); } </script>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JS 實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單的幾種方式
- 純css下拉菜單 無(wú)需js
- 基于JavaScript實(shí)現(xiàn)單選框下拉菜單添加文件效果
- 全國(guó)省市二級(jí)聯(lián)動(dòng)下拉菜單 js版
- JS組件Bootstrap實(shí)現(xiàn)下拉菜單效果代碼
- js實(shí)現(xiàn)select二級(jí)聯(lián)動(dòng)下拉菜單
- 使用Javascript實(shí)現(xiàn)選擇下拉菜單互移并排序
- JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏
- javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼
- JS+CSS實(shí)現(xiàn)的經(jīng)典圓角下拉菜單效果代碼
- js代碼實(shí)現(xiàn)下拉菜單【推薦】
相關(guān)文章
微信小程序wx.getUserInfo授權(quán)獲取用戶信息(頭像、昵稱)的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序wx.getUserInfo授權(quán)獲取用戶信息(頭像、昵稱)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08離開(kāi)頁(yè)面時(shí)檢測(cè)表單元素是否被修改,提示保存的js代碼
離開(kāi)頁(yè)面時(shí),檢測(cè)表單元素是否被修改,然后給出提示.防止用戶錯(cuò)失修改的機(jī)會(huì),提高用戶體驗(yàn)。2010-08-08當(dāng)自定義數(shù)據(jù)屬性為json格式字符串時(shí)jQuery的data api問(wèn)題探討
當(dāng)自定義數(shù)據(jù)屬性是一個(gè) json 格式字符串時(shí),緩存的數(shù)據(jù)如果被修改, 則修改后的數(shù)據(jù)繼續(xù)存在于緩存系統(tǒng)中, 如果不留意,這可能導(dǎo)致一些BUG,接下來(lái)將對(duì)此問(wèn)題詳細(xì)概述下2013-02-02微信小程序 this.triggerEvent()的具體使用
這篇文章主要介紹了微信小程序 this.triggerEvent()的具體使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12詳解Bootstrap網(wǎng)格垂直和水平對(duì)齊方式
網(wǎng)格在網(wǎng)頁(yè)布局中是一個(gè)重點(diǎn)和難點(diǎn),布局是網(wǎng)頁(yè)設(shè)計(jì)的起點(diǎn)和基礎(chǔ),本文主要介紹了Bootstrap網(wǎng)格垂直和水平對(duì)齊方式,感興趣的可以了解一下2021-07-07一個(gè)收集圖片的bookmarlet(js 刷新頁(yè)面中的圖片)
這個(gè)代碼是用來(lái)在新的頁(yè)面內(nèi)顯示當(dāng)前頁(yè)面內(nèi)的所有圖片的。2010-05-05LBS blog sql注射漏洞[All version]-官方已有補(bǔ)丁
LBS blog sql注射漏洞[All version]-官方已有補(bǔ)丁...2007-08-08