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

gz98411

于 2018-07-22 19:21:26 发布

阅读量4.6k

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/gz98411/article/details/81157595

本文介绍了使用jQuery实现网页导航特效的方法，包括二级菜单的显示与隐藏切换，以及通过底部箭头控制菜单项的显示状态。当鼠标悬停在二级子菜单上时，子菜单会添加背景色，增强用户体验。同时，底部箭头点击事件用于隐藏或显示菜单项，并相应改变箭头方向，提供直观的交互反馈。

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

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;