jQuery第七章課後作業

suixinCaesar發表於2018-07-24
jQuery

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>

 

相關文章