第七章 jQuery中的的事件与动画 ——课后作业：

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

<!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 type="text/javascript">
     $(function () {
         $( "#nav .navsBox .firstNav").click(function () {
             $(" #nav .navsBox ul").toggle()
         })
         $("#nav .navsBox ul li").mouseover(function () {
             $(this).toggleClass("onbg")
         }).mouseout(function () {
             $(this).toggleClass("onbg")
         })
         /*第二种方法*/
         // $(" li").hover(function () {
         //           $(this).toggleClass("onbg")
         // }),function () {
         //     $(this).toggleClass("onbg")
         // }
        /*第三种方法*/
         // $("#nav .navsBox ul li").mouseover(function () {
         //     $(this).css("background-color","#F9DBD1")
         // })
         // $("#nav .navsBox ul li").mouseout(function () {
         //     $(this).css("background-color","#EBEBEB")
         // })
         })
 </script>
</body>
</html>

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

<!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><a href="#">运动户外</a></li>
        <li><a href="#">食品、茶、酒</a></li>
        <li><a href="#">手机、数码</a></li>
        <li><a href="#">电脑办公</a></li>
        <li class="lastone"></li>
    </ul>
</div>
 <script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function () {
        $(" #menu ul.nav li.lastone").click(function () {
            $("#menu ul.nav li:gt(6)").toggle()
            $("#menu ul.nav li:last").toggleClass("up")
            $("#menu ul.nav li:last").show()
        })
    })
</script>
</body>
</html>

第七章 jQuery中的的事件与动画 ——课后作业：

猜你喜欢