模拟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">&#xe60e;</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">&#xe60e;</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">&#xe60e;</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">&#xe60e;</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">&#xe60e;</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">&#xe60e;</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">&#xe606;</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;">&#xe606;</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>