web页面常用的一个需求,写下拉菜单是我们往往不是用select_option,而是自定义一个元素列出选项来满足需求,当我们点击按钮出现菜单,
点击按钮或菜单以外页面空白地方隐藏该菜单,这里提供一种简单有效的方法仅供参考:
1 document.onclick = function(e) { 2 $("div").hide(); 3 } 4 $('button').on("click", function(e) { 5 if($("#div").css("display") == "none") { 6 $("#div").show(); 7 } else { 8 $("#div").hide(); 9 } 10 e = e || event; 11 stopFunc(e); 12 }); 13 14 $('#div').on("click", function(e) { 15 e = e || event; 16 stopFunc(e); 17 }); 18 function stopFunc(e) { 19 e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; 20 }
点击button出现div菜单,再次点击button隐藏菜单或点击div以外页面其他地方隐藏div菜单。