滑块菜单消失得太快

Slider menu is disappearing too fast

本文关键字：消失 菜单      更新时间：2024-04-06

我正在制作一个滑块，下面有一个额外的三角形，但我不知道为什么，我的三角形消失得很快，我无法进入菜单。有人能解释一下原因吗？我会很感激的。

这是我的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();

这是我的小提琴：https://jsfiddle.net/dL9s0p7x/

问题是您正在为list[i]使用mouseout事件处理程序。所以当你把鼠标从About导航移开时，子列表会立刻隐藏起来。相反，您可以使用以下代码：

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();

这是演示：点击演示

希望这能解决你的问题。

这是因为"mouseout"事件。你应该把它改成"mouseleave"。

您可以在这里阅读更多关于差异的信息

相关文章：