note_cloud--显示笔记下拉菜单

显示笔记下拉菜单

------------------------------------------------------------------------------------------------

1.通过点击“箭头”按钮显示三个菜单项

2.获取DIV对象  调用slideDown（200）；动画展示菜单200毫秒

3.点击其余下拉菜单或者界面其余地方时候，将之前的下拉菜单关闭

<div class="note_menu" tabindex="-1">'
    <dl>
	<dt><button type="button" class="btn btn-default btn-xs btn_move" title="移动至..."><i class="fa fa-random"></i></button></dt>
	<dt><button type="button" class="btn btn-default btn-xs btn_share" title="分享"><i class="fa fa-sitemap"></i></button></dt>
	<dt><button type="button" class="btn btn-default btn-xs btn_delete" title="删除"><i class="fa fa-times"></i></button></dt>
    </dl>
</div>

------------------------------------------------------------------------------------------------

JS代码：

//显示笔记下拉菜单(单击其他下拉或者界面其他地方时候时隐藏原来菜单)--取消冒泡
$("#note_ul").on("click",".btn_slide_down",function(e){
	//隐藏笔记菜单
	$("#note_ul div").hide();
	//显示三个选项的菜单
	var note_menu = $(this).parent().next();
	note_menu.slideDown(200);
	return false;//阻止冒泡事件
	//e.stopPropagation();此方法也可以
});
//点击body隐藏菜单
$("body").click(function(){
	$("#note_ul div").hide();
});

测试结果：