适合超级新手的JQuery多级菜单

最新推荐文章于 2021-09-19 18:25:34 发布

luo_yong_men

最新推荐文章于 2021-09-19 18:25:34 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

文章标签： jQuery JavaScript CSS HTML ViewUI

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/luo_yong_men/article/details/83812058

本文提供了一个使用jQuery实现的多级下拉菜单示例，通过鼠标悬停显示和隐藏子菜单，适用于初学者实践jQuery的基础用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script type="text/javascript" src="jquery-1.4.4.js"></script>

<script type="text/javascript" >

$(document).ready(function() {

$("li.x_1").mousemove(function(){

$(this).children().slideDown(180);

});

$("li.x_1").mouseleave(function(){

$(this).children().slideUp(180);

});

$(".x_1 ul li").hover(function(){

$(this).children().slideDown(180);

},function(){

$(this).find("ul").slideUp(180);

});

$(".j2").hover(function(){

$(this).find("ul").slideDown(180);

},function(){

$(this).find("ul").slideUp(180);

});

});

</script>

<style type="text/css">

.firt{background-color:bule;}

.x_1{float:left;list-style-type:none;line-height:30px; height:30px;width:140px;background-color:blue;margin-left:2px;

text-align:center;}

.x_1:hover{background-color:red;}

.x_1 ul{display:none;position:absolute;margin-left:-40px;}

.x_1 ul li{background-color:blue;list-style-type:none;width:140px;}

.x_1 ul li:hover{background-color:red;}

a{color:#ffffff;underline:none;}

.i2 ul{display:none;position:absolute;margin-left:102px;margin-top:-30px; }

.j2 ul{display:none;position:absolute;margin-left:102px;margin-top:-30px; }

</style>

</head>

<body>

<ul id="firt" class="firt">

<li class="x_1">

第一个主菜单

<ul>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

</ul>

</li>

<li class="x_1">

第二个主菜单

<ul>

<li class="i2" >

<a href="#">子菜单ttt</a>

<ul class="i3" >

<li><a href="#">子菜单2</a></li>

<li><a href="#">子菜单2</a></li>

<li><a href="#">子菜单2</a></li>

<li class="j2">

<a href="#">子菜单2</a>

<ul class="j3" >

<li><a href="#">子菜单3</a></li>

<li><a href="#">子菜单3</a></li>

<li><a href="#">子菜单3</a></li>

<li><a href="#">子菜单3</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

</ul>

</li>

<li class="x_1">

第三个主菜单

<ul>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单1</a></li>

</ul>

</li>

</ul>

</body>

</html>

我也是超级新手，昨天开始学的jquery 我觉得我们新手学的时候就需要一些想我这样简单的列子才看的懂！！

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。