jQuery第七章课后作业

最新推荐文章于 2022-07-20 22:22:03 发布

suixinCaesar

最新推荐文章于 2022-07-20 22:22:03 发布

阅读量6.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： jQuery制作网页高级特效

本文链接：https://blog.youkuaiyun.com/suixinCaesar/article/details/81178050

jQuery制作网页高级特效专栏收录该内容

14 篇文章

订阅专栏

本文介绍了使用jQuery制作页面导航的技巧，包括购物特权主菜单的显示与隐藏切换，二级菜单在鼠标悬停时的背景效果，以及底部箭头控制菜单项隐藏与显示的交互功能。

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

4.制作页面导航特效，初识状态下仅显示“购物特权”主菜单，单击“购物特权”二级菜单在显示和隐藏之间切换，当鼠标指针移至二级子菜单上时，子菜单添加背景景色。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>导航特效</title>
<style type="text/css">
*{
	margin: 0px;
	padding: 0px;
	font-size: 12px;
}
#nav .navsBox{
	width: 160px;
}
#nav .navsBox .firstNav{
	height:45px;
	line-height:45px;
	background-color:#EBEBEB;
	border-left:10px solid #FE705C;
	padding-left:20px;
	width:130px;
	font-weight:bold;
	cursor: pointer;
}
#nav .navsBox ul{
	display:none;
	list-style:none; 
}
#nav .navsBox ul li{
	display:block;
	height:45px;
	line-height:45px;
	padding-left:70px;
	width:90px; 
	background:#F2F2F2 33px 7px no-repeat;
}

#nav .navsBox ul li.jedh{
	background-image:url("./images/huan.gif");
}
#nav .navsBox ul li.jlbbyk{
	background-image:url("./images/you.gif");
}
#nav .navsBox ul li.jwljb{
	background-image:url("./images/gouwu.gif");
}
#nav .navsBox ul li.mrljb{
	background-image:url("./images/meiri.gif");
}
#nav .navsBox ul li.vipjtj{
	background-image:url("./images/zhe.gif");
}
#nav .navsBox ul li.onbg{
	background-color:#F9DBD1;
}

#nav .navsBox ul li a{
	color:#000;
	text-decoration:none;	
}


</style>
</head>
<body>
<div id="nav"> 
	 <div class="navsBox">
	 	<div class="firstNav">购物特权</div> 
		<ul>
			<li class="jedh"><a href="#">全额兑换</a></li>
			<li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li>
			<li class="jwljb"><a href="#">购物领金币</a></li>
			<li class="mrljb"><a href="#">每日领金币</a></li>
			<li class="vipjtj"><a href="#">VIP阶梯价</a></li>
		</ul>
	 </div> 
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
	$(function () {
		$(".firstNav").click(function () {
			$("ul").toggle("slow");
        })
		$("li").hover(
		    function () {
				$(this).css("background-color","#EBEBEB");
            },
			function () {
				$(this).css("background-color","#F2F2F2");
			}
		)
    })
</script>
</body>
</html>

5.当单击底部箭头，隐藏菜单项的后四项，并且底部箭头向下；再次单击底部箭头，显示隐藏的菜单项，并且底部箭头向上。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>FAQ列表</title>
<style type="text/css" >
*{
	margin:0px;
	padding:0px;
	font-size:12px;
}

a{
	color:#000;
	text-decoration:none;
}
#menu{
	margin:30px;
	width:188px;
	background-color:#EFFDFA;
	
}
#menu .top{
	height:40px;
	line-height:40px;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	border:1px solid #93D6C5;
	border-bottom:none;
}
#menu ul.nav{
	list-style:none; 
	
}
#menu ul.nav li{
	display:block;
	height:30px;
	line-height:30px;
	border:1px solid #93D6C5;
	border-top:none;
	 padding-left:30px;
	background:url(images/point.jpg) no-repeat 15px center;
}
#menu ul.nav li.lastone{
	border:none;
	cursor:pointer;
	background:#fff url(images/up.jpg) no-repeat center top;
}
#menu ul.nav li.up{
	background:#fff url(images/down.jpg) no-repeat center top;
}
span.icon{
	float:right;
	margin-right:10px;
	margin-top:10px;
}
</style>

</head>
<body>
<div id="menu">
	<div class="top">全部商品详细分类</div>
    <ul class="nav">
        <li><a href="#">尾品汇</a></li>
        <li><a href="#">图书音像数字管</a></li>
        <li><a href="#">美妆个护</a></li>
        <li><a href="#">家具、家纺、家装</a></li>
        <li><a href="#">鞋靴、箱包</a></li>
        <li><a href="#">珠宝装饰</a></li>
        <li><a href="#">手表/眼镜/礼品</a></li>
        <li name="li"><a href="#">运动户外</a></li>
        <li name="li"><a href="#">食品、茶、酒</a></li>
        <li name="li"><a href="#">手机、数码</a></li>
        <li name="li"><a href="#">电脑办公</a></li>
        <li class="lastone"></li>
    </ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function () {
        $(".lastone").click(function () {
            $("li:gt(6):not(li:last)").toggle()
            $("li:last").toggleClass("up")
        })
    })
</script>
</body>
</html>