Posted in Javascript onJune 17, 2016
本文实例讲述了JS模拟bootstrap下拉菜单效果。分享给大家供大家参考,具体如下:
模拟bootstrap下拉菜单
在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的“下拉菜单”
由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果
当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢?
起初的想法,给body绑定一个onclick事件,当点击空白的地方由于事件冒泡,触发click body的事件,但是问题来了,点击控件的时候,同样会触发body的click事件,导致下拉菜单显示出来之后,有被收缩回去了,因此这个思路不正确
由于bootstrap已经实现了这个功能,查看其源代码,找到了解决思路:
给document绑定事件(隐藏其子菜单),当触发控件的方法时则阻止其冒泡,不让其触发绑定
<!-- 筛选导航栏 --> <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"的控件,如果有,则让其隐藏起来 $("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%"); }); }); //显示或关闭筛选条件 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"); //给当前div添加选中样式 $currentObj.closest(".float_left").addClass("active") var $ul = $currentObj.closest("div").find("ul"); //ul是展开状态 if($ul.data("show") == "show"){ $ul.slideUp("slow"); $ul.attr("data-show","hide"); }else{ //ul是展开状态 $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>
希望本文所述对大家JavaScript程序设计有所帮助。
JS模拟bootstrap下拉菜单效果实例
- Author -
hbiao68声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@