Ajax json jquery实现菜单案例
2024-08-31 08:39:21
需求：
运用AJAX请求文件menu.json，配置菜单栏，并实现以下功能点：
1. 点击向左箭头，菜单向左移动，隐藏
2. 点击向右箭头，菜单向右移动，显示
3. 点击一级菜单，被点击菜单的子菜单显示，其他兄弟节点的子菜单隐藏
页面显示：ajaxTest\WebRoot\nav.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax json jquery 菜单案例</title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
</style>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url: "data/menu.json",
success: function( data) {
var html = "<ul>";
for(var i=0; i<data.length; i++) {
html += "<li>" + data[i].topMenu +"<ul>";
var subData = data[i].subMenu;
for(var j=0; j<subData.length; j++) {
html += "<li>" +subData[j] + "</li>";
}
html += "</ul></li>";
}
html += "</ul>";
$(".nav-container").prepend(html);
$(".nav-container>ul>li").siblings().children().hide();
},
error:function(data){
alert(data);
}
}) $(".drag-handle").on("click", function() {
if($(this).hasClass("right")) {
$(this).text(">");
$(this).removeClass("right");
$(this).addClass("left");
$(this).parent().animate({"left": "-150px"}, 'slow');
} else {
$(this).text("<");
$(this).removeClass("left");
$(this).addClass("right");
$(this).parent().animate({"left": "0px"}, 'slow');
}
})
$(document).on("click", ".nav-container>ul>li", function() {
$(this).children().toggle();
$(this).siblings().children().hide();
return false;
})
})
</script>
</head>
<body>
<div class="nav-container">
<div class="drag-handle right"><</div>
</div>
</body>
</html>
菜单Json数据：ajaxTest\WebRoot\data\menu.json
[
{
"topMenu": "菜单1",
"subMenu": [
"子菜单1",
"子菜单2",
"子菜单3"
]
},
{
"topMenu": "菜单2",
"subMenu": [
"子菜单1",
"子菜单2",
"子菜单3"
]
},
{
"topMenu": "菜单3",
"subMenu": [
"子菜单1",
"子菜单2",
"子菜单3"
]
},
{
"topMenu": "菜单4",
"subMenu": [
"子菜单1",
"子菜单2",
"子菜单3"
]
},
{
"topMenu": "菜单5",
"subMenu": [
"子菜单1",
"子菜单2",
"子菜单3"
]
},
{
"topMenu": "菜单6",
"subMenu": [
"子菜单1",
"子菜单2",
"子菜单3"
]
}
]
页面样式：ajaxTest\WebRoot\css\style.css
.nav-container {
position: absolute;
top:;
left:;
width: 170px;
}
ul {
width: 150px;
float: left;
background: #204d62;
}
ul li {
list-style: none;
line-height: 40px;
text-align: center;
color: #fff;
cursor: pointer;
}
ul li > ul {
background: #eee;
}
ul li > ul li {
color: #204d62;
}
.drag-handle {
float: left;
width:20px;
height:40px;
background: #204d62;
color: #fff;
font-weight: bold;
line-height: 40px;
text-align: center;
cursor: pointer;
}
最新文章
- java注解处理
- IO流 FileOutputSteam在fos.txt写出hello
- lua高阶用法 OO的实现
- Hierarchyid 常用操作
- Spark SQL External Data Sources JDBC官方实现读测试
- Basic knowledge of html (keep for myself)
- 实现一个基于FTP协议的程序——文件上传下载器(十三)
- NagiosQL 跨站脚本漏洞
- 45种Javascript技巧大全【转藏】
- Git命令详解（一）-个人使用
- 从 Kubernetes 谈容器网络
- SolrCloud的介绍
- 集合 (set) 的增删改查及 copy()方法
- eclipse发布web
- su: 无法设置用户ID: 资源暂时不可用
- ios开发之--多个按钮单选效果
- .NET Core中使用Dapper操作Oracle存储过程最佳实践
- Leetcode:Add Two Numbers分析和实现
- 构建微软智能云：介绍新的Azure业务转型创新技术
- Innodb和Mysiam引擎的区别