JS练习之JS/CSS点击下拉菜单

一、效果图

先上效果图：

点击按钮后

二、代码篇

HTML代码：

<h2>可点击的下拉菜单</h2>
<p>点击按钮显示下拉菜单</p>

<div class="dropdown">
	<button onclick="myFunction()" class="dropbtn">下拉菜单</button>
	<div id="myDropdown" class="dropdown-content">
		<a href="#home">Home</a>
		<a href="#about">About</a>
		<a href="#content">Content</a>
	</div>
</div>

.dropbtn {
	background-color:#4CAF50;
	color:white;
	padding:16px;
	font-size:16px;
	border:none;
	cursor:pointer;
}
/*鼠标停留在按钮或点击按钮时的样式*/
.dropbtn:hover, .dropbtn:focus {
	background-color:#3e8e41;
}

.dropdown {
	position:relative;
	display:inline-block;
}

.dropdown-content {
	display:none;	/*默认隐藏*/
	position:absolute;
	background-color:#f9f9f9;
	min-width:160px;
	overflow:auto;
	box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:1;
}

.dropdown-content a {
	color:black;
	padding:12px 16px;
	text-decoration:none;
	display:block;
}

/*hover表示鼠标停留在下拉菜单各项上时*/
.dropdown a:hover {background-color:#f1f1f1}

.show {display:block;}	/*用于显示下拉菜单*/

JS代码：

/*点击按钮，下拉菜单在显示/隐藏之间切换*/
 function myFunction(){
	document.getElementById("myDropdown").classList.toggle("show");	
	//如果myDropdown元素有show的class时，
	//删除show；如果没有，则增加show的class。即toggle的反转操作。
}

 //点击下拉菜单以外区域隐藏
 window.onclick = function(event){
	 if(!event.target.matches('.dropbtn')){
		 var dropdowns = document.getElementsByClassName("dropdown-content");
		 var i;
		 for(i=0;i<dropdowns.length;i++){
			 var openDropdown = dropdowns[i];
			 if(openDropdown.classList.contains('show')){
				 openDropdown.classList.remove('show');	//利用了CSS中.show的显示菜单样式
			 }
		 }
	 }
 }

三、感悟

下拉菜单的显示和隐藏：最关键的是toggle方法，如果myDropdown元素有show的class时，删除show；如果没有，则增加show的class。即反转操作。
通过定义带有show的class的样式，再给元素添加show类，最后在JS里灵活调用了.classList.toggle("");方法。

点击菜单栏以外区域也可以隐藏菜单：首先添加window.onclick事件并捕捉事件，同样应用了show的类，并且用contains判断是否含有show类，来决定是否移除show类。
当鼠标点击菜单以外区域，!event.target.matches('.dropbtn')判断为真，openDropdown.classList.remove('show');会删除show类，即不应用.show样式，隐藏了菜单。可见下图：

通过这样的方式，大大减少了代码量。