第七章 jQuery中的事件与动画

最新推荐文章于 2022-06-13 16:06:24 发布

JiangMye

最新推荐文章于 2022-06-13 16:06:24 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/jiangmye/article/details/81123468

版权

1，显示二级菜单并显示二级子菜单背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作页面导航特效</title>
    <style>

      *{
        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();
        });
        $("li").mouseenter(function () {
            $(this).addClass("onbg");
        })
        $("li").mouseout(function () {
            $(this).removeClass("onbg");
        })
        })

</script>
</body>
</html>

2，点击底部箭头隐藏菜单后四项，再次点击底部箭头显示隐藏的菜单项并且箭头向上

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏菜单项</title>
    <style>
        *{
            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>
    $(function () {
        $(".lastone").click(function (){
            $("li:gt(6)").toggle();
            $("li:eq(11)").toggleClass("up");
            $("li:eq(11)").toggle();
        })
    })
</script>
</body>
</html>

JiangMye

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第七章 jQuery中的事件与动画

1，显示二级菜单并显示二级子菜单背景色&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;制作页面导航特效&lt;/title&gt; &lt;style&gt; *{
复制链接

扫一扫