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();});

测试结果：