JS模拟bootstrap下拉菜单效果实例
本文实例讲述了JS模拟bootstrap下拉菜单效果。分享给大家供大家参考，具体如下：
模拟bootstrap下拉菜单
在工作中要切一个效果：点击导航栏，则出现下列菜单，但是当点击其他地方的时候，就隐藏子菜单，效果有点类似于bootstrap的“下拉菜单”
由于bootstrap的子菜单的样式与设计不同，因此需要自己写一个类似的效果
当点击某个控件的时候，则显示出下拉菜单，但是，当点击空白的地方的时候怎么让其自动隐藏呢？
起初的想法，给body绑定一个onclick事件，当点击空白的地方由于事件冒泡，触发clickbody的事件，但是问题来了，点击控件的时候，同样会触发body的click事件，导致下拉菜单显示出来之后，有被收缩回去了，因此这个思路不正确
由于bootstrap已经实现了这个功能，查看其源代码，找到了解决思路：
给document绑定事件（隐藏其子菜单），当触发控件的方法时则阻止其冒泡，不让其触发绑定
<!--筛选导航栏-->
<divclass="border_b_bottom_3eeetext-centerwidth_40float_leftactive"style="z-index:999">
<divclass="margin_bottom_10margin_top_10">
<spanonclick="showOrHideItem(this,event)"class="title">
分类
<spanclass="caret"></span>
</span>
<ulclass="list-unstyledall_widthsqh_absolutesqh_line_height_25sqh_tmp_bj_ffborder_b_bottom_eeesqh_position_top_100sqh_position_left_0display_none"data-show="hide"style="z-index:999;">
<liclass="margin_left_10margin_right_10sqh_pointerborder_b_bottom_eee"onclick="jumpTo(this)"target="https://www.baidu.com">
<spanclass="float_left">家政</span>
<spanclass="float_righticoniconfontsqh_line_height_15"></span>
<spanclass="clearfix"></span>
</li>
<liclass="margin_left_10margin_right_10sqh_pointerborder_b_bottom_eee"onclick="jumpTo(this)"target="https://www.baidu.com">
<spanclass="float_left">蔬菜</span>
<spanclass="float_righticoniconfontsqh_line_height_15"></span>
<spanclass="clearfix"></span>
</li>
<liclass="margin_left_10margin_right_10sqh_pointersqh_font_color_red"onclick="jumpTo(this)"target="https://www.baidu.com">
<spanclass="float_left">零食</span>
<spanclass="float_righticoniconfontsqh_line_height_15"></span>
<spanclass="clearfix"></span>
</li>
</ul>
</div>
</div>
<divclass="text-centerborder_b_bottom_3eeewidth_40float_left">
<divclass="margin_bottom_10margin_top_10border_b_right_eee">
<spanonclick="showOrHideItem(this,event)"class="title">
分类
<spanclass="caret"></span>
</span>
<ulclass="list-unstyledall_widthsqh_absolutesqh_line_height_25sqh_tmp_bj_ffborder_b_bottom_eee"data-show="hide"style="top:100%;left:0px;z-index:999;display:none">
<liclass="margin_left_10margin_right_10sqh_pointerborder_b_bottom_eee"onclick="jumpTo(this)"target="https://www.baidu.com">
<spanclass="float_left">家政1</span>
<spanclass="float_righticoniconfontsqh_line_height_15"></span>
<spanclass="clearfix"></span>
</li>
<liclass="margin_left_10margin_right_10sqh_pointerborder_b_bottom_eeesqh_font_color_red"onclick="jumpTo(this)"target="https://www.baidu.com">
<spanclass="float_left">蔬菜1</span>
<spanclass="float_righticoniconfontsqh_line_height_15"></span>
<spanclass="clearfix"></span>
</li>
<liclass="margin_left_10margin_right_10sqh_pointer"onclick="jumpTo(this)"target="https://www.baidu.com">
<spanclass="float_left">零食1</span>
<spanclass="float_righticoniconfontsqh_line_height_15"></span>
<spanclass="clearfix"></span>
</li>
</ul>
</div>
</div>
<divclass="text-rightborder_b_bottom_3eeetext-centerwidth_20float_left">
<divclass="margin_bottom_10margin_top_10"onclick="showSearch(this,event)">
<spanclass="iconiconfontfont_14display_blockpadding_left_5"></span>
</div>
<!--显示搜索框-->
<divclass="sqh_tmp_bj_ff">
<divclass="sqh_absolutesqh_line_height_25sqh_tmp_bj_ffsearch_cont"style="top:58%;right:0px;z-index:999;display:none;"data-search="hide">
<divclass="margin_left_15">
<divclass="sqh_relative"style="margin-right:80px;">
<spanclass="iconiconfontfont_14sqh_absolutepadding_left_5"style="left:0px;top:0px;"></span>
<inputclass="in_searchall_widthpadding_left_30sqh_tmp_bj_f3sqh_border_radius_20"placeholder="搜索"onclick="stopEvent(this,event)"type="text"value="">
</div>
<divclass="float_right"style="width:80px;">
<buttontype="button"class="btnbtn-e4005a"style="padding:4px12px;">搜索</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%");
});
});
//显示或关闭筛选条件
functionshowOrHideItem(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();
}
}
//展示搜索框
functionshowSearch(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();
}
functionstopEvent(obj,event){
//阻止事件冒泡
event.stopPropagation();
}
</script>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。