javascript - slider 菜单消失得太快

Question

我正在制作一个 slider ，其下有一个额外的三 Angular 形，但我不知道为什么，我的三 Angular 形消失得非常快，我无法进入菜单。有人可以解释一下为什么吗？我将不胜感激。

这是我的 HTML:

<nav class="nav">
            <ul>
                <div class="nav_pointer_before"></div>
              <li class="nav_pointer">About
                <ul>
                  <li>One</li>
                  <li>Two</li>
                  <li>Three</li>
                </ul>
              </li>
              <li>Gallery</li>
              <li>Contact</li>
    </ul>
</nav>

这是我的 CSS:

.nav>ul>li {
      display: inline-block;
      position: relative;;
    }

    .nav>ul>li>ul{
      display: none;
      position: absolute;
      width: 120px;
      height: 100px;
      background-color: white;
      margin-top: 12px;
      margin-left: -25px;
      text-align: left;
      font-size: 14px;
      text-transform: capitalize;
      padding-left: 14px;
    }

    .nav:after {
      position: relative;
    }

    .nav>ul>li>ul li {
      padding-top: 12px;
    }

    .nav_pointer_before {
      display: none;
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      padding-bottom: 20px;
      margin-left: 20px;
      margin-right: 20px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid black;
    }

这是我的 JS:

  function slideMenu(){
    var list = document.querySelectorAll(".nav>ul>li");
    var pointer = document.querySelectorAll(".nav_pointer_before");

    for(var i = 0; i < list.length; i++){
      list[i].addEventListener("mouseover", function(event){
        if(this.children.length > 0){
          this.children[0].style.display = "block";
          pointer[0].style.display = "block";
        };
      });

      list[i].addEventListener("mouseout", function(event){
        if(this.children.length > 0){
          this.children[0].style.display = "none";
          pointer[0].style.display = "none";
          };
        };
      });
    };
  };

  slideMenu();

这是我的 fiddle :https://jsfiddle.net/dL9s0p7x/

Answer 1

问题是您正在为 list[i] 使用 mouseout 事件处理程序。因此，当您将鼠标从“关于导航”移开时，子列表会立即隐藏。 相反，您可以使用以下代码:

HTML:

    <nav class="nav">
            <ul>
                <div id="nav_pointer" class="nav_pointer_before"></div>
              <li class="nav_pointer">About
                <ul id="sublist">
                  <li>One</li>
                  <li>Two</li>
                  <li>Three</li>
                </ul>
              </li>
              <li>Gallery</li>
              <li>Contact</li>
    </ul>
</nav>

JavaScript:

    function slideMenu(){
        var list = document.querySelectorAll(".nav>ul>li");
        var pointer = document.querySelectorAll(".nav_pointer_before");

        for(var i = 0; i < list.length; i++){
          list[i].addEventListener("mouseover", function(event){
            if(this.children.length > 0){
              this.children[0].style.display = "block";
              pointer[0].style.display = "block";
            };
          });

  document.getElementById('sublist').addEventListener("mouseout", function(event){
          this.style.display = "none";
          document.getElementById('nav_pointer').style.display = "none";
            });
        };
      };

      slideMenu();

这是演示:Click for demo

希望这能解决您的问题。