下拉框折叠效果

原创 米斯达科 随笔 javascript 221阅读 2018-06-28 15:37:36 举报

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
ul{
margin:0;
padding: 0;
width: 150px;
}
li{
list-style: none;
margin: 0;
padding: 0;
}
.leftSidebar{
margin:0 auto;
width: 500px;
}
.lmName{
display: block;
width: 150px;
background-color: #f9f9f9;
height: 30px;
border:1px solid #e5e5e5;
padding-left: 15px;
line-height: 30px;
cursor: pointer;
}
.ejlmUl{
display: none;
width:165px;
border:1px solid #e5e5e5;
}
.ejlmUl li{
border-bottom: 1px dashed #e5e5e5;
padding-left: 15px;
font-size: 12px;
line-height: 24px;
}
.action{
display: block;
}
</style>
<script type="text/javascript">
window.onload = function(){
var left = document.getElementById('leftUl');
var lmName = document.getElementsByClassName('lmName') //获取class属性为lmName的元素集合
for(var i =0; i<lmName.length; i++){
lmName[i].index = i;
lmName[i].onclick= function(){
allNone() //折叠所有菜单
// var ejlmUl = document.getElementsByClassName('ejlmUl')
// for(var j =0; j<ejlmUl.length; j++){
// ejlmUl[j].style.display ='none'
// }
var ejlmUl = document.getElementsByClassName('ejlmUl')
ejlmUl[this.index].style.display ='block'

        }
    }

}
function allNone(){
    var ejlmUl = document.getElementsByClassName('ejlmUl')
    for(var j =0; j<ejlmUl.length; j++){
        ejlmUl[j].style.display ='none'
    }
}

</script>
</head>
<body>
<div class="leftSidebar">
<ul id="leftUl">
<li>
<a class="lmName">一级下拉框</a>
<ul class="ejlmUl action">
<li class="ejlm">1</li>
<li class="ejlm">11</li>
</ul>
</li>
<li>
<a class="lmName">二级下拉框</a>
<ul class="ejlmUl">
<li class="ejlm">2</li>
<li class="ejlm">22</li>
</ul>
</li>
<li>
<a class="lmName">三级下拉框</a>
<ul class="ejlmUl">
<li class="ejlm">3</li>
<li class="ejlm">33</li>
</ul>
</li>
</ul>
</div>
</body>

</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复