您的位置：首页 > Web前端 > JavaScript

前端 js树形菜单代码

2015-12-29 16:03 666 查看

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.main ul{
display: none;
}
</style>
</head>
<body>
<ul>
<li class="main">
<a href="#">菜单项1</a>
<ul>
<li>
<a href="#">子菜单项11</a>
<ul>
<li>
<a href="#">子菜单11-1</a>
<ul>
<li><a>子菜单111-1</a></li>
<li><a>子菜单111-2</a></li>
<li><a>子菜单111-3</a></li>
</ul>
</li>
<li><a>子菜单11-2</a></li>
<li><a>子菜单11-3</a></li>
</ul>
</li>
<li>
<a href="#">子菜单项12</a>
<ul>
<li><a>子菜单12-1</a></li>
<li><a>子菜单12-2</a></li>
<li><a>子菜单12-3</a></li>
</ul>
</li>
</ul>
</li>
<li class="main">
<a href="#">菜单项2</a>
<ul>
<li>
<a href="#">子菜单项21</a>
<ul>
<li><a>子菜单2-1</a></li>
<li><a>子菜单2-2</a></li>
<li><a>子菜单2-3</a></li>
</ul>
</li>
<li>
<a href="#">子菜单项22</a>
</li>
</ul>
</li>
<li class="main">
<a href="#">菜单项3</a>
<ul>
<li>
<a href="#">子菜单项31</a>
</li>
<li>
<a href="#">子菜单项32</a>
</li>
</ul>
</li>
</ul>
<script>
$(document).ready(function () {
$(".main  a").click(
function () {
$(this).next().toggle();
}
);
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航