Закрыть меню на мобильных устройствах с якорной ссылкой

Я читал в этом сообществе и тестировал коды, но не могу закрыть меню. Я создал простой JSFiddle, чтобы понять это. Я хотел бы закрыть его с помощью jQuery. Проблема только в мобильной версии. В этом примере пользователь щелкает меню «БОЛЬШЕ», и появляется пункт «НОВОСТИ». «НОВОСТИ» — это якорная ссылка, и когда пользователь нажимает на нее, меню остается открытым. Это проблема. Как закрыть меню?

Я пробовал все.

jQuery(".item-131").css( 'pointer-events', 'none' );
jQuery(".item-131").attr('onmouseover','');
jQuery(".item-131").off('mouseenter mouseleave');
jQuery(".item-131").unbind("mouseenter mouseleave");

Но не могу закрыть меню.

См. мой JSFiddle: https://jsfiddle.net/karmany/gc0ku8on/


javascript html jquery css mobile-devices
person karmany    schedule 07.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если бы вы могли показать свой курсор на мобильном телефоне, вы бы увидели, что когда вы щелкаете по меню, курсор все еще находится над кнопкой меню, пока вы на самом деле не нажмете его — теперь у вас может быть событие по клику, которое закрывает меню при нажатии?

person Andrew Robinson    schedule 07.04.2019
comment
Я пробовал jQuery(".item-216").click(function() { //jQuery(".item-131").css( 'pointer-events', 'none' ); jQuery(".item-216").attr('onmouseover',''); //jQuery(".item-131").off('mouseenter mouseleave'); //jQuery("li.item-131").unbind("mouseenter mouseleave"); //jQuery("li.item-216").unbind("mouseenter mouseleave"); }); Но ничего не работает. - person karmany; 08.04.2019
comment
Глядя на это, я думаю, что я бы делал любые состояния наведения, используя класс с именем .hover, чтобы вы могли переключать класс с помощью jQuery вместо того, чтобы полагаться на него. Таким образом вы можете сделать: ``$('.item-216).on('mousedown', function() { $(this).toggle('hover'); }) - person Andrew Robinson; 08.04.2019