在写这个的时候,首先要捋顺思路。点一个菜单的时候,其他的要闭合,点一级菜单的时候,二三级菜单要闭合,等等。
大致代码如下:
<aside> <ul class="one"> <li><code class="hljs xml"><a class="a" href="#">目录A</a> </code> <ul class="two"> <li><code class="hljs xml"><a class="a" href="#">二级目录A</a> </code> <ul class="three"> <li><code class="hljs xml"><a href="#">三级目录A</a></code></li> </ul> </li> <li><code class="hljs xml"><a class="a" href="#">二级目录B</a></code></li> <li><code class="hljs xml"><a class="a" href="#">二级目录C</a></code></li> </ul> </li> <li><code class="hljs xml"><a class="a" href="#">目录B</a> </code> <ul class="two"> <li><code class="hljs xml"><a class="a" href="#">二级目录A</a> </code> <ul class="three"> <li><code class="hljs xml"><a href="#">三级目录A</a></code></li> </ul> </li> <li><code class="hljs xml"><a class="a" href="#">二级目录B</a></code></li> <li><code class="hljs xml"><a class="a" href="#">二级目录C</a></code></li> </ul> </li> <li><code class="hljs xml"><a class="a" href="#">目录C</a> </code></li> </ul> </aside>
//jQuery部分 <script src="js/jquery-1.8.3.min.js"></script><script>
$(document).ready(function() {
$('.a').click(function() {
if ($(this).siblings('ul').css('display') == 'none') {
$(this).siblings('ul').slideDown(100).children('li');
if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block') {
$(this).parents('li').siblings('li').children('ul').slideUp(100);
}
} else {
//控制自身菜单下子菜单隐藏
$(this).siblings('ul').slideUp(100);
//控制自身菜单下子菜单隐藏
$(this).siblings('ul').children('li').children('ul').slideUp(100);
}
});
});
</script>
如果要添加样式的话,一定要注意,否则菜单可能会出现错误。
完整代码地址:https://github.com/SabrinaTian/ThreeMenuNav.git
git里还有一个带有图标的案例,不点击的话是+号,菜单打开后,变为-号。