Question

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

这是我的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/

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

希望这能解决你的问题。

Answer 2

这是因为＆＃34; mouseout＆＃34;事件。你应该把它改成＆＃34; mouseleave＆＃34;。

您可以详细了解差异here

滑块菜单消失得太快

2 个答案: