jq点击按钮打开和关闭弹出层,点击除了当前按钮以外的地方关闭弹出层

1.html

<a id="more" onclick="moreFun()">更多</a>
<ul id="moreList" style="display:none">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

2.实现点击更多按钮弹出moreLise列表,点击页面其他地方关闭moreLise列表,js代码如下:

//使用toggle方法实现列表的展开和关闭
function moreFun(){
       $("#moreList").toggle(); 
}
//点击页面其他地方关闭
document.onclick = function (e) {
       //判断点击的地方是否为“更多”按钮和弹出层是否显示
	if(!$(e.target).is(".more") && $("#moreList").is(":visible")==true){
		$("#moreList").hide();
	}
}

 

posted @ 2018-09-12 15:38  小伍w  阅读(3342)  评论(0编辑  收藏  举报