经常在 网上看到 点击按钮 出现一个 下拉列表
点击下拉列表 跳出一个 二级标题 或跳转页面
用 ul--li--ul--li 的布局试了一下 发现点击子级的时候
子级会隐藏（父级li 子级ul包在 li下 因为子级ul
也属于li 用冒泡 不行 ） 研究了好久 用事件委托搞定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{list-style: none; margin: 0;padding: 0;}
#btn{width:100px;height: 100px;background: red; cursor: pointer;padding-top: 100px; position: relative; }
#pox{display: none; position: absolute;bottom: -400px;}
#pox p{width: 100px;height: 400px;background: green;}
</style>
<script>
window.onload=function () {
var oBtn=document.getElementById('btn');
var oPox=document.getElementById('pox');
oBtn.onclick=function (ev) {
var oEvent=ev||event;
var oSrc=oEvent.srcElement||oEvent.target;
if(oSrc.id=='btn'&&oPox.style.display=='block'){
oPox.style.display='none';
}else{
oPox.style.display='block';
}
}
}
</script>
</head>
<body>
<ul>
<li id="btn">11
<ul>
<li id="pox">
<p></p>
</li>
</ul>
</li>
</ul>
</body>
</html>
网友评论