下拉菜单之绝对定位和事件监听

预览效果

HTML主体代码

<ul id="nav">
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">技术文章</a>
      <ul>
        <li><a href="#">PHP</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">Python</a></li>
        <li><a href="#">Linux</a></li>
      </ul>
    </li>
    <li><a href="#">博客</a></li>
    <li>
      <a href="#">资源下载</a>
      <ul>
        <li><a href="#">学习工具</a></li>
        <li><a href="#">开发环境</a></li>
        <li><a href="#">编辑器/IDE</a></li>
        <li><a href="#">国外资源</a></li>
      </ul>
    </li>
    <li><a href="#">行业资讯</a></li>
  </ul>

CSS样式

* { margin: 0; padding: 0; font-size: 14px; font-family: "Microsoft YaHei UI"; }
    li { list-style: none; }
    #nav { background: #000; height: 50px; line-height: 50px; }
    #nav li { float: left; position: relative; }
    #nav a { color: #ddd; padding: 0 20px; text-decoration: none; }
    #nav a:hover { color: #FFF; }
    #nav li ul { display: none; position: absolute; width: 210px; border: 1px solid #ddd;  }
    #nav li ul a { color: #000; }

通过子菜单的样式，理解了绝对定位、相对定位的概念。

JavaScript代码

const navs = document.querySelectorAll('#nav li');
  navs.forEach(function (nav) {
    //为没一个导航菜单li添加事件监听
    nav.addEventListener('mouseover', showMenu);
    nav.addEventListener('mouseout', closeMenu);
  })
  function showMenu (event) {
    //这里需要判断相邻标签是否是子菜单
    if(event.target.nextElementSibling !== null && event.target.nextElementSibling.nodeName == 'UL'){
      event.target.nextElementSibling.style.display = 'block';
    }
  }
  function closeMenu (event) {
    if(event.target.nodeName == 'A' && event.target.nextElementSibling !== null){
      event.target.nextElementSibling.style.display = 'none';
    }
  }

学习总结和感悟

1. CSS要多理解，配合控制台查看各个元素及布局区域特征、变化，有助于理解；
2. JS代码还是得多写，多写几遍才能掌握事件监听、冒泡的原理；
3. 课后练习和作业还是得坚持。