亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

效果

文檔結(jié)構(gòu)

 <div class="nav">
      <ul>
        <li class="first"><a href="">菜單1</a></li>
        <li><a href="">菜單2</a></li>
        <li>
          <a href="">菜單3</a>
          <ul class="subMenu">
            <li><a href="">子菜單</a></li>
            <li><a href="">子菜單</a></li>
            <li><a href="">子菜單</a></li>
            <li><a href="">子菜單</a></li>
            <li><a href="">子菜單</a></li>
            <li><a href="">子菜單</a></li>
          </ul>
        </li>
        <li><a href="">菜單4</a></li>
        <li>
          <a href="">菜單5</a>
          <ul class="subMenu">
            <li><a href="">子菜單</a></li>
            <li><a href="">子菜單</a></li>
            <li><a href="">子菜單</a></li>
            <li><a href="">子菜單</a></li>
            <li><a href="">子菜單</a></li>
            <li><a href="">子菜單</a></li>
            <li><a href="">子菜單</a></li>
            <li><a href="">子菜單</a></li>
          </ul>
        </li>
      </ul>
    </div>

js代碼

   <script>
      //獲取導(dǎo)航菜單
      const navs = document.querySelectorAll(".nav>ul>li");
      //獲取子菜單
      const subs = document.querySelectorAll(".subMenu");
      // 為導(dǎo)航菜單添加監(jiān)聽事件
      navs.forEach(function (li) {
        li.addEventListener("mouseover", showSubMenu);
        li.addEventListener("mouseout", closeSubMenu);
      });
      // 為子菜單添加監(jiān)聽事件,解決主導(dǎo)航切換到子菜單，子菜單消失問題
      subs.forEach(function (ul) {
        ul.addEventListener("mouseover", function (e) {
          this.style.display = "block";
        });
        ul.addEventListener("mouseout", function (e) {
          this.style.display = "none";
        });
      });
      function showSubMenu(e) {
        // 判斷當(dāng)前導(dǎo)航是否有子菜單
        if (e.target.nextElementSibling != null) {
          e.target.nextElementSibling.style.display = "block";
        }
      }
      function closeSubMenu(e) {
        // console.log(e.target);
        // 判斷當(dāng)前導(dǎo)航是否有子菜單并且當(dāng)前觸發(fā)事件的為菜單標(biāo)簽
        if (e.target.nextElementSibling != null && e.target.nodeName == "A") {
          e.target.nextElementSibling.style.display = "none";
        }
      }
    </script>

樣式表

 <style>
      * {
        padding: 0;
        margin: 0;
      }
      a {
        text-decoration: none;
      }
      li {
        list-style: none;
      }
      .nav > ul > li {
        float: left;
        height: 60px;
        line-height: 60px;
        color: #fff;
        position: relative;
      }
      .nav > ul > li > a {
        color: #fff;
        padding: 0 30px;
        height: 56px;
        display: inline-block;
      }
      .nav > ul > li > a:hover {
        border-bottom: 4px solid rgb(13, 151, 0);
      }
      .subMenu {
        display: none;
        color: #333;
        position: absolute;
        width: 200px;
        border: 1px solid #ddd;
        text-align: center;
        top: 60px;
        left: -50px;
        background: #f4f4f4;
      }
      .subMenu li {
        float: left;
      }
      .subMenu a {
        float: left;
        padding: 0 20px;
        width: 60px;
        color: #333;
      }
      .subMenu a:hover {
        background: #ddd;
      }
      .nav {
        height: 60px;
        background: #000;
        width: 100%;
        padding-left: 150px;
      }
      .first {
        background: #333;
      }
    </style>

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：目前 ， 還沒有發(fā)現(xiàn)有人自己寫出不一樣的js， 基本上都是照搬老師的， 說明大家還不夠自信， 加油