По некоторым причинам выполнил вертикальное выпадающее меню на сайте с помощью 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>
Решил сам :) Спасибо за помощь
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;
Замените 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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Имеется такой кусок, пытаюсь вызвать метод класса внутри конструктора, те
Подскажите пожалуйста есть ли какая-нибудь HTML/JS библиотека-слайдер для файлов в форматеpdf с кнопками переключения next/prev? В идеале хотелось...