PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 导航下拉菜单

导航下拉菜单

阿杰
阿杰 原创
2020年06月16日 08:37:38 1025浏览

实现一个导航下拉菜单

  1. 先用ul、li等标签把导航内容打上

    1. <ul id="nav">
    2. <li><a href="">首页</a></li>
    3. <li><a href="">视频教程</a></li>
    4. <li>
    5. <a href="">资源下载</a>
    6. <ul>
    7. <li><a href="">php工具</a></li>
    8. <li><a href="">在线手册</a></li>
    9. <li><a href="">学习课件</a></li>
    10. <li><a href="">网站源码</a></li>
    11. </ul>
    12. </li>
    13. <li><a href="">社区问答</a></li>
    14. <li>
    15. <a href="">技术文章</a>
    16. <ul>
    17. <li><a href="">头条</a></li>
    18. <li><a href="">博客</a></li>
    19. <li><a href="">php教程</a></li>
    20. <li><a href="">php框架</a></li>
    21. </ul>
    22. </li>
    23. </ul>

  2. 标签样式写上

    1. <style>
    2. /* 元素样式初始化 */
    3. *{
    4. margin: 0;
    5. padding: 0;
    6. /* box-sizing: border-box; */
    7. }
    8. a{
    9. color: #bbbbbb;
    10. text-decoration: none;
    11. }
    12. #nav{
    13. background-color: #000000;
    14. height: 10vh;
    15. line-height: 10vh;
    16. }
    17. li{
    18. list-style: none;
    19. margin: 0 10px;
    20. float: left;
    21. }
    22. #nav>li>a:hover{
    23. color: #ffffff;
    24. }
    25. /* 将父级设置为菜单的定位容器,转为定位元素 */
    26. #nav>li{
    27. position: relative;
    28. }
    29. #nav>li>ul{
    30. position: absolute;
    31. top: 10vh;
    32. width: 180px;
    33. border: 1px solid #aaaaaa;
    34. border-top: none;
    35. }
    36. #nav>li>ul>li a{
    37. display: inline-block;
    38. height: 10vh;
    39. color: #444444;
    40. }
    41. ul.sub li:hover{
    42. background-color: #eeeeee;
    43. }
    44. /* 初始化时不显示子菜单 */
    45. #nav>li>ul{
    46. display: none;
    47. }
    48. </style>

3.js添加事件

  1. <script>
  2. // 获取所有的主导航
  3. const navs = document.querySelectorAll("#nav > li");
  4. navs.forEach(function(nav){
  5. // 鼠标移入事件
  6. nav.addEventListener('mouseover',showSubMenu);
  7. // 鼠标移出事件
  8. nav.addEventListener('mouseout',hideSubMenu);
  9. })
  10. //显示子菜单
  11. function showSubMenu(ev){
  12. // 判断当前导航有没子菜单
  13. if(ev.target.nextElementSibling!=null){
  14. ev.target.nextElementSibling.style.display='block';
  15. }
  16. }
  17. //隐藏子菜单
  18. function hideSubMenu(ev){
  19. // 判断当前导航有没子菜单
  20. if(ev.target.nextElementSibling!=null){
  21. ev.target.nextElementSibling.style.display='none';
  22. }
  23. }
  24. </script>

但这时出现了冒泡事件,子菜单的显示和隐藏事件冒泡到主菜单

解决方法—给隐藏事件加个判断,是否是触发到a标签

  1. //隐藏子菜单
  2. function hideSubMenu(ev){
  3. // console.log(ev.target.nodeName);
  4. // 判断当前导航有没子菜单
  5. if(ev.target.nodeName==='A' && ev.target.nextElementSibling!=null){
  6. ev.target.nextElementSibling.style.display='none';
  7. }
  8. }

然后就成功了

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议