Переключить класс с задержкой при наведении - PullRequest
Новая
       32

Переключить класс с задержкой при наведении

0 голосов
/ 29 мая 2019

Я открываю свое подменю с добавлением класса раскрытия к его родителю.Чего я хочу добиться, так это когда я наведите курсор мыши на родителя, если «активное» наведение не происходит, чтобы немедленно открыть подменю, но если подменю уже отображается, подождите 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>

1 Ответ

1 голос
/ 29 мая 2019 

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>
...