Как сделать задержку при открытии тега details с помощью JQuery?

123

25 января 2020, 10:00

По некоторым причинам выполнил вертикальное выпадающее меню на сайте с помощью details. При наведении мыши появляется выпадающий список. Но т.к. главных списков меню с подразделами много, есть небольшие неудобства при перемещении мыши. Никак не могу сделать, чтобы меню выпадало только после 1-2 секунд удержания мыши. JQuery код:

function checkWidth() { 
      var windowWidth = $('body').innerWidth(), 
          elem = $(".number-bullets");  
      if(windowWidth < 640){ 
        $("details").attr("open","true"); 
      } 
      else{ 
        $(function() { 
            $('details').on('mouseover', function() { 
              $(this).attr('open', true); 
            }).on('mouseout', function() { 
              $(this).attr('open', false); 
            }) 
          }); 
      } 
    } 
   
    checkWidth(); 
   
    $(window).resize(function(){ 
      checkWidth();  
    });

<details> 
  <summary class="oral-surgery">Oral surgery</summary> 
  <li class="leaf"><a href="services-teeth-extractions.php">Tooth Extraction</a></li> 
  <li class="leaf"><a href="wisdom-tooth-extraction.php">Wisdom Tooth Extraction</a></li> 
  <li class="leaf"><a href="services-tmj.php">Corrective Jaw Surgery (TMJ)</a></li> 
  <li class="leaf"><a href="services-dental-implants.php">Dental Implants</a></li> 
  <li class="leaf"><a href="periodontics-surgery.php">Periodontics Surgery</a></li> 
</details> 
 
<details> 
  <summary class="restauration">Restauration</summary> 
  <li class="leaf"><a href="white-filling.php">White Filling</a></li> 
  <li class="leaf"><a href="crown-and-bridge.php">Crown and Bridge</a></li> 
  <li class="leaf"><a href="implant-crown.php">Implant Crown</a></li> 
  <li class="leaf"><a href="inlays-onlays.php">Inlays - Onlays</a></li> 
  <li class="leaf"><a href="Tooth-colored-fillings.php">Tooth-Colored- Fillings</a></li> 
  <li class="leaf"><a href="night-guard.php">Night Guard</a></li> 
  <li class="leaf"><a href="services-root-canal-treatment.php">Root Canal Treatment</a></li> 
  <li class="leaf"><a href="holistic-amalgam-removals.php">Holistic Amalgam Removals</a></li> 
</details>

Answer 1

Решил сам :) Спасибо за помощь

function checkWidth() {
  var windowWidth = $('body').innerWidth(),
      elem = $(".number-bullets"); // лучше сохранять объект в переменную, многократно чтобы не насиловать 
                                  // страницу для поиска нужного элемента
  if(windowWidth < 640){
    $("details").attr("open","true");
  }
  else{
    $(function() {
      $("details").on("mouseenter mouseleave", function(event) {
        window.clearTimeout(timer);
        var that = this;
        if (event.type == "mouseenter") {
          timer = window.setTimeout(function() {
             that.setAttribute('open', true)
          }, pause)
        } else this.removeAttribute('open')
      });
      });
  }
}
checkWidth(); // проверит при загрузке страницы
$(window).resize(function(){
  checkWidth(); // проверит при изменении размера окна клиента
});
var timer, pause = 400;

Answer 2

Замените mouseover на hover и используйте setTimeout c проверкой hover на добавление атрибута open

var moveTimer; 
function checkWidth() { 
  var windowWidth = $('body').innerWidth(), 
      elem = $(".number-bullets");  
  if (windowWidth < 640) { 
    $("details").attr("open", true); 
  } else { 
    $('details').hover( 
      function () { 
        var $this = $(this); 
        setTimeout(function(){ 
          if ($this.is(':hover')) { 
            $this.attr('open', true); 
          } 
        }, 300); 
      }, 
      function () { 
        $(this).attr('open', false); 
      } 
    ) 
  } 
} 
   
    checkWidth(); 
   
    $(window).resize(function(){ 
      checkWidth();  
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<details> 
  <summary class="oral-surgery">Oral surgery</summary> 
  <li class="leaf"><a href="services-teeth-extractions.php">Tooth Extraction</a></li> 
  <li class="leaf"><a href="wisdom-tooth-extraction.php">Wisdom Tooth Extraction</a></li> 
  <li class="leaf"><a href="services-tmj.php">Corrective Jaw Surgery (TMJ)</a></li> 
  <li class="leaf"><a href="services-dental-implants.php">Dental Implants</a></li> 
  <li class="leaf"><a href="periodontics-surgery.php">Periodontics Surgery</a></li> 
</details> 
 
<details> 
  <summary class="restauration">Restauration</summary> 
  <li class="leaf"><a href="white-filling.php">White Filling</a></li> 
  <li class="leaf"><a href="crown-and-bridge.php">Crown and Bridge</a></li> 
  <li class="leaf"><a href="implant-crown.php">Implant Crown</a></li> 
  <li class="leaf"><a href="inlays-onlays.php">Inlays - Onlays</a></li> 
  <li class="leaf"><a href="Tooth-colored-fillings.php">Tooth-Colored- Fillings</a></li> 
  <li class="leaf"><a href="night-guard.php">Night Guard</a></li> 
  <li class="leaf"><a href="services-root-canal-treatment.php">Root Canal Treatment</a></li> 
  <li class="leaf"><a href="holistic-amalgam-removals.php">Holistic Amalgam Removals</a></li> 
</details>