H5 部分代码
<body>
<div style=" width:200px; height:500px; border:1px solid red;">
<ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
<li>
幼儿园同学
<ul>
<li>鼻涕虫</li>
<li>爱哭鬼</li>
<li>张大胆</li>
</ul>
</li>
<li>
小学同学
<ul>
<li>张三丰</li>
<li>张无忌</li>
<li>乔布斯</li>
</ul>
</li>
<li>
初中同学
<ul>
<li>盖茨</li>
<li>川普</li>
<li>奥巴马</li>
</ul>
</li>
</ul>
</div>
</body>
js部分代码
1.插入jq
2.<script type="text/javascript">
$(function(){
//让最里面的li先隐藏
$('#u1>li>ul>li').hide();
//给最外的li加上点击事件
$('#u1>li').click(function(){
//当点击外层li时,找到li的儿子ul,再找到最里面的li让它显示或隐藏 toggle()显示或隐藏
$(this).children('ul').find('li').toggle(1000);
// 让同级的li里的ul里的li隐藏
$(this).siblings('li').children('ul').find('li').hide(1000);
})
})
</script>