html代码:
css代码:
@charset "utf-8";
.left{
width: 200px;
height: 502px;
}
.one_ul>li{
width: 100%;
text-align: center;
font-size: 20px;
border: 1px solid darkgray;
}
.two_ul{
display: none;
}
.two_ul li{
width: 100%;
text-align: center;
font-size: 15px;
background: gainsboro;
border: 1px solid darkgray;
}
效果图:
js方法:
<script type="text/javascript">
var one_li = document.getElementsByClassName('one_li')[0];
var one_ul = document.getElementsByClassName('one_ul')[0];
var two_ul = document.getElementsByClassName('two_ul')[0];
var one_ul_li = one_ul.getElementsByTagName('li');
function open() {
var a = false;
for(var i = 0; i < one_ul_li.length; i++) {
one_ul_li[i].addEventListener('click', function() {
if(a == false) {
this.nextElementSibling.style.display = 'block';
a = true;
} else {
this.nextElementSibling.style.display = 'none';
a = false;
}
})
}
}
open();
</script>