jquery利用ajax请求数据渲染二级菜单

忘是亡心i 2022-04-27 20:16 258阅读 0赞

## 导航 ##

<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			body,html{
    				width: 100%;
    			}
    			nav{
    				/*calc()可以传两个参数  % - px其他像素值  自适应的写法
    				 赋值运算符 前后 记得要给它加上空格
    				 */
    				width: calc(100% - 60px);
    				height: 35px;
    				line-height: 35px;
    				color: white;
    				padding: 0 30px;
    				background-color: #2dbb55;
    			}
    			ul{
    				list-style: none;
    			}
    			ul > li{
    				float: left;
    				margin-right: 10px;
    				cursor: pointer;
    				position: relative;
    				padding: 0 20px;
    			}
    			ol{
    				position: absolute;
    				width: 100px;
    				left: 0px;
    				display: none;
    			}
    			ol>li{
    				background-color: #11a13a;
    				height: 30px;
    				line-height: 30px;
    				font-size: 13px;
    				text-align: center;
    			}
    			.li_active{
    				background-color: #11a13a;
    			}
    		</style>
    	</head>
    	<body>
    		<nav>
    			<ul>
    				
    			</ul>
    		</nav>
    	</body>
    	<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		//children只能找到子节点
    		//console.log($('ul').children('li'))
    		$.ajax({
    			type:"get",
    			url:"data.json",
    			async:true,
    			success:function (res) {
    				console.log(res);
    				var str = '';//用来拼接  html数据
    				for(var i=0;i<res.length;i++){
    					//res[i].title //首页  跟团游。。
    					//undefined   false
    					//数组  隐式转换 true
    					var str1 = '';//接收  ol的html字符
    					//为什么 str1写在里面  每次的ol都是不一样的  html内容
    					if(res[i].area){
    						//也是要一个for循环
    						for(var j=0;j<res[i].area.length;j++){
    							str1 += '<li>'+res[i].area[j]+'</li>'
    						}
    						
    						str1 = '<ol>'+str1+'</ol>';
    						//console.log(str1);
    					}
    					
    					
    					str += '<li>'+res[i].title+str1+'</li>'
    				}
    				
    				$('ul').append(str);
    				
    				init();
    				
    				
    			}
    		});
    		
    		function init () {
    			//一开始就立马去执行这段代码  但是  html节点并没有生成
    			$('ul').children('li').hover(function () {
    				//console.log(this)//this dom对象
    				$(this).children('ol').show();
    				$(this).addClass('li_active').siblings('li').removeClass('li_active');
    			},function () {
    				$(this).children('ol').hide();
    				$(this).removeClass('li_active')
    			})
    		}
    	</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，258人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery+ajax请求数据，渲染到前端界面

作为一个前端开发，在日常工作中，会不断的请求接口，调用接口，再对接口的数据进行一定的处理，渲染在前端界面，尤其是在今天前后端分离的时代，这项技能是每个前端开发必备~ 这里就简

旧城等待，/ 2023年03月13日 05:51/ 0 赞/ 28 阅读

相关 Jquery Ajax 请求 JSON格式数据

var adata = { "username": username, "password":

傷城~/ 2022年12月10日 07:10/ 0 赞/ 243 阅读

相关 jquery顶部导航浮动二级菜单

[下载地址][Link 1]网站顶部导航条二级菜单，jquery实现的导航浮动效果。 ![1632563637.png][] dd: [Link 1]: https:/

柔情只为你懂/ 2022年09月12日 14:49/ 0 赞/ 215 阅读

相关 JQuery请求$.Ajax()

1请求方法 1.1Ajax()方法 //$.ajax({settings}); //所有参数都是可选的 $.ajax({ type

向右看齐/ 2022年07月15日 23:53/ 0 赞/ 262 阅读

相关利用JQuery的ajax请求实现文件上传

今天给大家介绍一下如何利用JQuery的ajax请求实现文件上传功能。主要需要引入一个js文件，然后调用js文件中的ajaxFileUpload请求就可以实现异步文件上传机

比眉伴天荒/ 2022年07月14日 20:56/ 0 赞/ 193 阅读

相关利用JQuery的ajax请求实现文件上传

今天给大家介绍一下如何利用JQuery的ajax请求实现文件上传功能。主要需要引入一个js文件，然后调用js文件中的ajaxFileUpload请求就可以实现异步文件上传机

墨蓝/ 2022年07月14日 20:56/ 0 赞/ 336 阅读

相关 jquery利用ajax请求数据渲染二级菜单

导航 <style type="text/css"> { margin: 0; padding: 0;

忘是亡心i/ 2022年04月27日 20:16/ 0 赞/ 259 阅读

相关 Jquery ajax请求返回html数据类型

Jquery ajax请求返回html数据类型 Jquery ajax 异步请求返回 html ftl页面代码 java代码

电玩女神/ 2022年04月13日 07:58/ 0 赞/ 763 阅读

相关原生ajax请求与jquery-ajax请求

ajax请求可以在不刷新页面的情况下，请求后台服务器为了演示的效果，在jsp中添加一段视频，再播放视频的时候请求后台，看效果。普通表单提交返回数据，会刷新页面使

约定不等于承诺〃/ 2022年02月04日 08:29/ 0 赞/ 448 阅读

相关模拟ajax请求数据并进行页面渲染

通过ajax请求数据后，进行页面渲染。文件介绍 1.goods.json，用于模拟后台接口数据 { "cursor": 0, "

分手后的思念是犯贱/ 2021年09月15日 09:54/ 0 赞/ 582 阅读