<style type="text/css">
*{margin: 0px; padding: 0rem;}
ul li{width: 6.25rem; height: 2.5rem;float: left; list-style: none; background-color: #00FFFF; margin-right: 1.25rem; text-align: center; line-height: 2.5rem;
border-radius: 1.25rem; }
li:hover{color: #7FFF00;}
li ul{display: none;}
li:hover ul{display: block;}
</style>
<ul id="ullist">
<li>one
<ul id="list">
<li>one</li>
<li>one </li>
<li>one</li>
</ul>
</li>
<!-- 二级下拉菜单 -->
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
这样写出一个下拉框在仅有在鼠标移到指定的位置才能，显示有什么办法，能够使它改成点击出现，再点击消失呢？刚刚学习前端，希望有懂的大佬指点一下
使用事件委托，定义一个变量，点击切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>the final project</title>
<link rel="stylesheet" href="css/finalproject.css" />
<script src="js/finalproject.js"></script>
<style>
*{margin: 0px; padding: 0rem;}
ul li{width: 6.25rem; height: 2.5rem;float: left; list-style: none; background-color: #00FFFF; margin-right: 1.25rem; text-align: center; line-height: 2.5rem;
border-radius: 1.25rem; }
/* li:hover{color: #7FFF00;} */
li ul{display: none;}
/* li:hover ul{display: block;} */
</style>
</head>
<body class="bkgimg">
<center>
<ul id="ullist" onclick='clickfunc()'>
<li>one
<ul id="list">
<li>one</li>
<li>one </li>
<li>one</li>
</ul>
</li>
<!-- 二级下拉菜单 -->
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
</center>
<script>
var b = true
function clickfunc(ev) {
console.log('----',ev)
var ev = ev || window.event;
var oLi = ev.srcElement || ev.target;
if(oLi.nodeName.toLowerCase() == 'li'){
console.log(oLi.children[0].style)
if(b){
oLi.children[0].style = "display:block"
}else{
oLi.children[0].style = "display:none"
}
}
b=!b
}
</script>
</body>
</html>
使用jq的话直接使用toggle()方法
可以写个点击事件，改变class名，通过css来显示隐藏