下拉框练习

模仿php中文网的导航

学习体会：

1.定位，如果li标签不设置定位属性，则下拉框会使相邻的li标签位置发生偏移

2.事件监听：addEventListener()绑定鼠标移入移出事件

3.如果被绑定者也就是ev.currentTarget是li标签的话在鼠标移出的时候会发生事件冒泡，导致被绑定的li标签也会隐藏，此时需要设置一个判断条件ev.target.nodeName===’A’即可，但是我是直接将被绑定者设置为a标签，这样的话li标签并没绑定事件，事件冒泡则不会影响li标签。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>下拉框</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      .nav {
        background-color: black;
        width: 100%;
        height: 50px;
        line-height: 50px;
      }
      /* 去掉列表样式 */
      li {
        list-style: none;
        float: left;
        margin-left: 20px;
      }
      /* 去掉下划线 */
      a {
        text-decoration: none;
      }
      /* 设置浮动和定位 */
      .nav > ul > li {
        float: left;
        margin-left: 15px;
        position: relative;
      }
      /* 设置悬停 */
      .nav > ul > li > a:hover {
        color: honeydew;
      }
      .nav > ul > li > ul {
        position: absolute;
        top: 50px;
        font-size: 0.5rem;
        border: 1px solid black;
        width: 180px;
        border-top: none;
      }
      .nav li > ul > li > a {
        display: inline-block;
        height: 50px;
        width: 65px;
      }
      .nav > ul > li > ul > li > a:hover {
        background-color: antiquewhite;
      }
      /* 隐藏下拉框 */
      .nav > ul > li > ul {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <ul>
        <li><a href="">首页</a></li>
        <li><a href="">视频教程</a></li>
        <li><a href="">入门教程</a></li>
        <li><a href="">社区问答</a></li>
        <li>
          <a href="">技术文章</a>
          <ul>
            <li><a href="">头条</a></li>
            <li><a href="">博客</a></li>
            <li><a href="">php教程</a></li>
            <li><a href="">php框架</a></li>
            <li><a href="">js教程</a></li>
            <li><a href="">mysql教程</a></li>
            <li><a href="">php小知识</a></li>
            <li><a href="">css教程</a></li>
            <li><a href="">html教程</a></li>
            <li><a href="">服务器运维</a></li>
          </ul>
        </li>
        <li>
          <a href="">资源下载</a>
          <ul>
            <li><a href="">php工具</a></li>
            <li><a href="">在线工具</a></li>
            <li><a href="">手册下载</a></li>
            <li><a href="">学习课件</a></li>
            <li><a href="">js特效</a></li>
            <li><a href="">后端模板</a></li>
            <li><a href="">网站源码</a></li>
            <li><a href="">类库下载</a></li>
          </ul>
        </li>
        <li><a href="">工具下载</a></li>
        <li><a href="">php培训</a></li>
      </ul>
      <script>
        // 获取被点击a标签
        const as = document.querySelectorAll(".nav>ul>li>a");
        // 循环  判断是否有兄弟节点 创建监听事件
        as.forEach(function (a) {
          //鼠标移入
          a.addEventListener("mouseover", showMenu);
          //鼠标移出
          a.addEventListener("mouseout", closeMenu);
        });
        function showMenu(ev) {
          // console.log(ev.target.nextElementSibling);
          // 判断是否有兄弟节点 有的话则打开下拉菜单
          if (ev.target.nextElementSibling !== null) {
            //console.log(ev.target.nextElementSibling);
            ev.target.nextElementSibling.style.display = "block";
          }
        }
        function closeMenu(ev) {
          if (ev.target.nextElementSibling !== null) {
           // console.log(ev.target.nextElementSibling);
            ev.target.nextElementSibling.style.display = "none";
          }
        }
      </script>
    </div>
  </body>
</html>

模仿php中文网的导航

学习体会：

1.定位，如果li标签不设置定位属性，则下拉框会使相邻的li标签位置发生偏移

2.事件监听：addEventListener()绑定鼠标移入移出事件

结果图

相关文章