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

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

2016-08-03 23:35 651 查看

下拉导航菜单可以用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>

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

标签：

相关文章推荐

新的分享

章节导航