<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
ul li{
list-style: none;
}
.first{
margin-top: 20px;
}
</style>
</head>
<body>
<div id='nav'>
<ul>
<li>
<div class='first'>账号管理</div>
<ul class='second'>
<li>账号注册</li>
<li>找回密码</li>
<li>账户关联登录</li>
<li>账号常见问题</li>
</ul>
</li>
<li>
<div class='first'>购物指南</div>
<ul class='second'>
<li>购物流程</li>
<li>服务条款</li>
<li>积分计划</li>
<li>取消订单</li>
</ul>
</li>
<li>
<div class='first'>配送方式</div>
<ul class='second'>
<li>国内配送</li>
<li>订单拆分</li>
<li>商品验货与签收</li>
<li>配送常见问题</li>
</ul>
</li>
<li>
<div class='first'>支付方式</div>
<ul class='second'>
<li>在线支付</li>
<li>货到付款</li>
<li>VANCL礼品卡</li>
<li>发票制度</li>
</ul>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
//使用css()方法设置隐藏
$(".second").css({"display":"none"});
//设置点击事件
$(".first").click(function () {
//1.首先使用this获得当前元素
//2.使用next()获得当前元素后面紧邻的同辈元素
//3.使用show()使当前隐藏的元素进行显示
//4.再使用parent()获得当前元素的父级元素
//5.获得父级元素之后使用siblings()获得父级元素前后的所有同辈元素
//6.再使用children()获取class名为second的子集元素
//7.在使用hide()使元素进行隐藏
$(this).next().show().parent().siblings().children(".second").hide();
});
</script>
</html>jQuery的做法(凡客商城左侧导航栏做法)
猜你喜欢
转载自blog.csdn.net/qq_41839784/article/details/89364755
今日推荐
周排行