Как сделать меню с задержкой при hover (js)?

Question

[Андрей]

Столкнулся с извечной проблемой задержки при наведении на элемент, при hover. Нужно решить ее js'ом.
На css я сделал, сперва убрав display: none и дальше добавив анимацию. но в итоге пришлось отказаться от этого варианта.

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

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

Comments

[Сергей Тутуков]

1.

$('.b-content-block__menu ul li').hover(
   // допустим var  this_1 = $(this);
    // при наведении
    function(){
        setTimeout(function() {
            var  this_2 = $(this);
            $(this).addClass('.b-content-block__menu__submenu');
        }, 
        1000); // 1 sek
    },

this_1 != this_2

2. addClass('.b-content-block__menu__submenu')- точка не нужна
api.jquery.com/addclass

Answer 1

[Ivan Bogachev]

Судя по стилям, вы вообще что-то не то и не туда добавляете. Если хотите решить вопрос с помощью js, для начала уберите все, что сязано с :hover из css. На событие hover будет добавляться отдельный класс "hovered":

.b-content-block__menu ul li.hovered > .b-content-block__menu__submenu { ... }
.b-content-block__menu ul li.hovered > .b-bottom-submenu { ... }

Теперь на упомянутое событие этот класс добавляем:

function(){
    setTimeout(function() {
        $(this).addClass('hovered');
    }, 
    500);
},

Не работает, что логично. Выходов два, первый:

function(){
    var _this = this;
    setTimeout(function() {
        $(_this).addClass('hovered');
    }, 
    500);
},

Второй - использовать стрелочную функцию. Надеюсь гуглом пользоваться умеете. В любом случае нужное поведение будет получено.

А теперь о боли...

Если вы используете БЭМ, не делайте вот так, пожалуйста:

.b-content-block__menu ul li .b-content-block__menu__submenu

А что вот это такое?
.b-content-block__menu ul li:hover > b > a

Или используйте БЭМ по фен-шую или не используйте вообще, смесь всего в одной куче - это ужасно.

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

Answer 2

[Егор Живагин]

Так ведь у них у всех этот класс уже создан в html-разметке

Comments

[Андрей]

если убрать его, то субменю просто станет видно, я пробовал

[Егор Живагин]

Андрей: добавляйте другой класс тогда, подправьте стили. Смысл добавлять класс, который уже добавлен?)

Answer 3

[tyzberd]

классы в .addClass() и .removeClass() пишутся без точки

Comments

[Андрей]

спасибо, но это не помогло