Question

我正在打开子菜单，并在其父级中添加了 reveal 类。我想要实现的是，当我将鼠标悬停在父对象上时，如果没有正在进行的“活动”鼠标悬停，则立即打开子菜单，但是如果已经显示了子菜单，请等待1秒钟，然后再打开新的子菜单。我之所以这样想，是因为如果鼠标离开子菜单/父级以查看它是否在1秒钟内重新进入，鼠标将“等待”其移动，以使其等待。

我知道有很多类似的线程，但是我已经做了尝试，现在看不到我做错了什么：

$('.menu > li').hover(function() {
  var ele = $(this);
  if ($('.menu li.reveal').length > 0) {
    var t = setTimeout(function() {
      if (ele.hover()) {
        $('.menu li.reveal').removeClass('reveal');
        ele.addClass('reveal');
      }
    }, 1000);
  } else {
    ele.addClass('reveal');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li>
    <a href="#">Link lv1</a>
    <ul class="submenu">
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Link lv1</a>
    <ul class="submenu">
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Link lv1</a>
    <ul class="submenu">
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
    </ul>
  </li>
</ul>

Answer 1

let timers = [], open = false;

$('.menu > li').hover(function() {
  if (this.dataset.timer) {
    timers.forEach(t => clearTimeout(t));
    clearTimeout(parseInt(this.dataset.timer));
    delete this.dataset.timer;
    open = false;
  } else if ($(this).hasClass('reveal')) {
    this.dataset.timer = setTimeout(() => {
      $(this).removeClass('reveal');
      delete this.dataset.timer;
      open = false;
    }, 1000);
    open = true;
  } else if (open) {
    timers.push(setTimeout(() => {
      $('.menu > li').removeClass('reveal');
      $(this).addClass('reveal');
    }, 1000));
  } else {
    $('.menu > li').removeClass('reveal');
    $(this).addClass('reveal');
  }
});

.submenu {
  display: none;
}

.menu > li.reveal ul {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li>
    <a href="#">Link lv1</a>
    <ul class="submenu">
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Link lv1</a>
    <ul class="submenu">
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Link lv1</a>
    <ul class="submenu">
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
    </ul>
  </li>
</ul>

更多样式的版本：

let timers = [], open = false;

$('.nav-item').hover(function() {
  if (this.dataset.timer) {
    timers.forEach(t => clearTimeout(t));
    clearTimeout(parseInt(this.dataset.timer));
    delete this.dataset.timer;
    open = false;
  } else if ($(this).hasClass('reveal')) {
    this.dataset.timer = setTimeout(() => {
      $(this).removeClass('reveal');
      delete this.dataset.timer;
      open = false;
    }, 1000);
    open = true;
  } else if (open) {
    timers.push(setTimeout(() => {
      $('.nav-item').removeClass('reveal');
      $(this).addClass('reveal');
    }, 1000));
  } else {
    $('.nav-item').removeClass('reveal');
    $(this).addClass('reveal');
  }
});

a {
  font-family: sans-serif;
  text-decoration: none;
  color: black;
}

a:hover {
  opacity: 0.5;
}

nav {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
}

.nav-item {
  display: inline-block;
  list-style: none;
}

.submenu {
  display: none;
  list-style: none;
}

.nav-item ul:focus-within {
  display: block;
}

.nav-item.reveal ul {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="nav-item">
    <a href="#">Link lv1</a>
    <ul class="submenu">
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
    </ul>
  </div>
  <div class="nav-item">
    <a href="#">Link lv1</a>
    <ul class="submenu">
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
    </ul>
  </div>
  <div class="nav-item">
    <a href="#">Link lv1</a>
    <ul class="submenu">
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
      <li><a href="#">Link lv2</a></li>
    </ul>
  </div>
</nav>

悬停时切换类

1 个答案: