SOURCE

console 命令行工具 X clear

                    
>
console
$(document).ready(function(){
//   div绑定click事件

	$("#option").on("click",function(){
    var menu = $(".menu");
		// 1 menu.css("display") == "none"
    // 2 menu.is(":hidden")
    if(menu.css("display") == "none"){
    	$(".menu").show(); 
    }else{
      $(".menu").hide();
    }
  });
//   应该点击显示,再点击隐藏,但是无效
  // $("#option").on("click", function(){
  // 	$(".menu").toggle();
  // });
});
// 点击空白隐藏菜单
$(document).mouseup(function(e){
  var _con = $(".menu");   // 设置目标区域
  if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
     $(".menu").hide();
  }
});
<a href="#">运行</a>
<a href="#">保存</a>
<a href="#" id="option">选项</a>

<div class="menu" >
  <a href="#"> 字体 </a>
  <a href="#"> 视图 </a>
  <a href="#"> 更新 </a>
  <a href="#"> 帮助 </a>
</div>
a {
  text-decoration: none;
  color: #000;
}

.menu{
  position:absolute;
  border: 1px solid lightgray;
  width: 50px;
  left: 73px;
  top: 30px;
  display:none;
}

.menu a{
  /* 块级元素, 后有换行 */
  display:block;
  color: #888;
  padding: 10 0 10 15;
  position:center;
  margin-left: 8px;
}

a:hover {
  background-color:#f1f1f1;
}