Блог

Главная - Вопросы по программированию - Закрыть выпадающее меню при наведении курсора css после щелчка по элементу

Закрыть выпадающее меню при наведении курсора css после щелчка по элементу

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу создать классическую строку меню на веб-странице, используя HTML, CSS и JavaScript. Все работает, но нажатие на пункт меню не скрывает меню. Скорее, меню появляется до тех пор, пока курсор не переместится с элемента. Это неестественно и особенно проблематично на устройствах с сенсорным управлением. Все онлайн-решения используют jQuery, который выглядит незнакомым и чуждым для меня. Есть ли способ скрыть меню без использования jQuery?

 function onButtonClick(event) {
  event.stopPropagation();
  console.log(event.target.id);
  //close menu here
}

Моя скрипка:https://jsfiddle.net/crlab/uq6at5mk

Ответ №1:

Сначала вы указываете элемент, с которым будете иметь дело:

 var el = this.parentNode;

Затем, используя ту же логику, что и в CSS, вы устанавливаете display значение none .

 el.style.display = "none";

Наконец, после 30ms вы восстанавливаете встроенный стиль, чтобы сохранить hover эффект:

 setTimeout(function() {
    el.style.removeProperty("display");
}, 30);

Конечный результат был бы таким:

 function onButtonClick(event) {
  event.stopPropagation();
  console.log(event.target.id);

  var el = this.parentNode;
  el.style.display = "none";
  setTimeout(function() {
        el.style.removeProperty("display");
  }, 30);

}

Надеюсь, это поможет.

Комментарии:

1. Не могли бы вы объяснить, почему setTimeout?

2. Потому что требуется некоторая задержка, достаточная для правильного скрытия меню на основе перерисовки браузера. В противном случае оно останется открытым. Попробуйте запустить его без setTimeout, чтобы проверить это.

3. @Azametzin — Ваше решение работает для Chrome и Firefox, но оно не работает для Safari (протестировано как на macOS, так и на iOS).

Ответ №2:

Просто другой подход к обработке события click:

HTML:

 <li class="dropdown" id="file" onclick="onClick(this)">
    ...
</li>
<li class="dropdown"  id="view" onclick="onClick(this)">
...
</li>

CSS:

 /*.dropdown:hover .dropdown-content {
    display: block;
}*/

И JavaScript:

 function onClick(event) {
    let list = event.children;
    setDisplayProperty(list);
}

function setDisplayProperty(list) {
    for (let item of list) {
        console.log(item.id);
        if(item.style.display == 'block')
            item.style.display = '';
        else
            item.style.display = 'block';
    }
}