二级菜单

当鼠标移到一级菜单上时,二级菜单显示,当移到二级菜单上是,还显示,移出二者时,二级菜单隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
<style type="text/css">
     
    #box{
        width:200px;
        height:500px;
        margin:0 auto;
    }
    #box ul li{
        list-style: none;
        float:left;
        margin-right:10px;
        border: 1px solid #ccc;
    }
    #box ul li dl dd{
        margin-top:10px;
        padding: 0;
        margin: 0;
    }
    #box ul li dl dd p{
        margin-top:10px;
    }
    .hide{
        display:none;
    }
 
</style>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#box ul li dl dt').mouseover(function(){//当鼠标移到dt上触发
        $(this).siblings('dd').removeClass('hide');//在此dt的兄弟节点上删除class,使二级菜单显示,用兄弟节点查找为了防止多个dt标签的干扰
    })
    $('#box ul li dl dt').mouseout(function(){//当鼠标移出dt触发
        $(this).siblings('dd').mouseover(function(){//当鼠标又到二级菜单上时,还显示
            $(this).removeClass('hide')
        })
        $(this).siblings('dd').mouseout(function(){//当移出dd,也移出dd时,添加class,二级菜单隐藏
            $(this).addClass('hide');
        })
         
    })
})
</script>
</head>
<body>
  <div id="box">
      <ul>
          <li>
              <dl>
                  <dt><a href="">客户服务</a></dt>
                  <dd class="hide">
                      <p><a href="">帮助中心</a></p>
                      <p><a href="">售后服务</a></p>
                      <p><a href="">在线客服</a></p>
                      <p><a href="">意见建议</a></p>
                      <p><a href="">客服邮箱</a></p>
                  </dd>
              </dl>
          </li>
          <li>
              <dl>
                  <dt><a href="">客户服务</a></dt>
                  <dd class="hide">
                      <p><a href="">帮助中心</a></p>
                      <p><a href="">售后服务</a></p>
                      <p><a href="">在线客服</a></p>
                      <p><a href="">意见建议</a></p>
                      <p><a href="">客服邮箱</a></p>
                  </dd>
              </dl>
          </li>
      </ul>
  </div
</body>
</html>

 

posted @   飘逸110  阅读(206)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示