如何利用jQuery制作下拉导航菜单

最新推荐文章于 2025-07-17 11:40:20 发布

潇遥快乐

最新推荐文章于 2025-07-17 11:40:20 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： css jQuery 文章标签： jquery css

本文链接：https://blog.youkuaiyun.com/hxy19971101/article/details/52108722

jQuery 同时被 2 个专栏收录

8 篇文章

订阅专栏

css

7 篇文章

订阅专栏

本文介绍如何利用jQuery实现下拉导航菜单。通过为`<li>`元素添加点击事件，显示或隐藏相关子菜单，实现了菜单的交互功能。jQuery代码包括找到指定元素的相邻元素并进行显示或隐藏操作，确保导航菜单的平滑切换。

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

下拉导航菜单可以用jQuery制作，首先做三个导航条（css代码省略了）

<div>
<ul>
<li> <a href="" class="li">衬衫</a>
<ul class="toggle">
<li><a href="">短袖衬衫</a></li>
<li><a href="">长袖衬衫</a></li>
<li><a href="">短袖T恤</a></li>
<li><a href="">短袖T恤</a></li>
</ul>
</li>
<li> <a href="" class="li">卫衣</a>
<ul class="toggle">
<li><a href="">开襟卫衣</a></li>
<li><a href="">套头卫衣</a></li>
<li><a href="">运动卫衣</a></li>
<li><a href="">童装卫衣</a></li>
</ul>
</li>
<li> <a href="" class="li">裤子</a>
<ul class="toggle">
<li><a href="">短裤</a></li>
<li><a href="">休闲裤</a></li>
<li><a href="">牛仔裤</a></li>
<li><a href="">免烫卡其裤</a></li>
</ul>
</li>
</ul>
</div>

结果如图：

然后添加核心的jQuery代码：

$(".li").click(function(){
$(this).next().show() //找到class="li"的元素的下一个元素，使他显示
.parent().siblings()//找到他父类的同辈的元素
.children().next().hide();//父类同辈元素的子元素的下一个元素隐藏
return false;//使链接不刷新网页
});

效果如图：

单击另一个：

需要弄清楚各个元素之类的辈分关系，然后利用jQuery做就很方便了！

下面是完整的代码：

<!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>导航菜单</title>
<script src="jQuery复习/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {

});
</script>
<style type="text/css">
ul, h4 {
padding: 0px;
margin: 0px;
}
li {
list-style: none;
display: blockl;
border: solid #666666 1px;
width: 80px;
text-align: center;
padding: 3.5px 0px;
}
a {
text-decoration: none;
color: #666;
font-size: 14px;
padding: 0px;
margin: 0px;
}
.li {
color: #F00;
}
.toggle {
display: none;
}
</style>
</head>

<body>
<div>
<ul>
<li> <a href="" class="li">衬衫</a>
<ul class="toggle">
<li><a href="">短袖衬衫</a></li>
<li><a href="">长袖衬衫</a></li>
<li><a href="">短袖T恤</a></li>
<li><a href="">短袖T恤</a></li>
</ul>
</li>
<li> <a href="" class="li">卫衣</a>
<ul class="toggle">
<li><a href="">开襟卫衣</a></li>
<li><a href="">套头卫衣</a></li>
<li><a href="">运动卫衣</a></li>
<li><a href="">童装卫衣</a></li>
</ul>
</li>
<li> <a href="" class="li">裤子</a>
<ul class="toggle">
<li><a href="">短裤</a></li>
<li><a href="">休闲裤</a></li>
<li><a href="">牛仔裤</a></li>
<li><a href="">免烫卡其裤</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>