javascript - 鼠标悬停时子菜单消失

Question

我希望下拉菜单的行为如下所示:https://svyaznoy.ru

var timer;
$(".catalog-menu li").mouseenter(function() {
    var that = this;
    timer = setTimeout(function(){
        $(that).children(".submenu").show();
    }, 500);
}).mouseleave(function() {
    var that = this;
    clearTimeout(timer);
    setTimeout(function () {
        $(that).children(".submenu").hide();
    }, 500);
});

ul {
  list-style-type: none;
  padding-left: 0;
}

ul.submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 1px;
  margin-left: -1px;
}

li {
  padding: 10px;
  border: 1px solid #ddd;
  margin-top: -1px;
}

li.submenu-item {
  min-width: 110px;
}

ul.catalog-menu {
  width: 150px;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul class="catalog-menu">
  <li>
    <span>Apple</span>
    <ul class="submenu">
      <li class="submenu-item">
      <span>Laptops</span>
      <ul class="submenu">
        <li class="submenu-item">Macbook 12</li>
        <li class="submenu-item">Macbook Pro 13</li>
         <li class="submenu-item">Macbook Pro 15</li>
         <li class="submenu-item">Macbook Air Retina</li>
      </ul>
      </li>
      <li class="submenu-item">
        <span>iPhones</span>
        <ul class="submenu">
          <li class="submenu-item">iPhone 8</li>
          <li class="submenu-item">iPhone 8 Plus</li>
          <li class="submenu-item">iPhone X</li>
          <li class="submenu-item">iPhone XS</li>
          <li class="submenu-item">iPhone XS Max</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Samsung</li>
  <li>Xiaomi</li>
</ul>

它的工作原理与 svyaznoy.ru 有点相似，但有一个错误。 例如，我将鼠标悬停在“Apple”菜单项上。笔记本电脑和 iPhone 出现了。接下来，我将鼠标悬停在“笔记本电脑”上。一些苹果笔记本电脑型号出现了。这就是错误显示的地方:如果我的鼠标指针没有离开“笔记本电脑”元素并直接进入笔记本电脑子菜单 - 一切正常，但是当它在前往笔记本电脑列表的途中离开“笔记本电脑”时，例如它在 iPhone 上盘旋了一会儿，然后笔记本电脑列表隐藏了，我希望它留在那里。我该如何修复这个错误？

jsfiddle:https://jsfiddle.net/16region/vtrj9wgk/30/

Answer 1

您可以将display: none 更改为visibility: hidden 并添加transition-delay。所以你不需要 jquery/js

ul {
      list-style-type: none;
      padding-left: 0;
    }
    
    ul.submenu {
      visibility: hidden;
      position: absolute;
      left: 100%;
      top: 1px;
      margin-left: -1px;
      transition: 0s visibility;
      transition-delay: 0.5s;
    }
    
    li {
      padding: 10px;
      border: 1px solid #ddd;
      margin-top: -1px;
    }
    li:hover > ul.submenu {
      visibility: visible;
    }
    li.submenu-item {
      min-width: 110px;
    }
    
    ul.catalog-menu {
      width: 150px;
      position: relative;
    }

<ul class="catalog-menu">
  <li>
    <span>Apple</span>
    <ul class="submenu">
      <li class="submenu-item">
      <span>Laptops</span>
      <ul class="submenu">
        <li class="submenu-item">Macbook 12</li>
        <li class="submenu-item">Macbook Pro 13</li>
         <li class="submenu-item">Macbook Pro 15</li>
         <li class="submenu-item">Macbook Air Retina</li>
      </ul>
      </li>
      <li class="submenu-item">
        <span>iPhones</span>
        <ul class="submenu">
          <li class="submenu-item">iPhone 8</li>
          <li class="submenu-item">iPhone 8 Plus</li>
          <li class="submenu-item">iPhone X</li>
          <li class="submenu-item">iPhone XS</li>
          <li class="submenu-item">iPhone XS Max</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Samsung</li>
  <li>Xiaomi</li>
</ul>