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>

鼠标悬停时子菜单消失

1 个答案: