jQuery preventDefault в соответствии с: зависанием на мобильном телефоне

Question

Пожалуйста, помогите мне разобраться, как справиться с ситуацией. У нас есть ссылка. Существует правило: hover css для этой ссылки, которое расширяет дополнительный блок ссылок.

$('li').children('a').on('click', function(e) { 
 
\t 
 
    if ($(this).siblings('div').is(':hidden')) { 
 
    
 
    \t e.preventDefault(); 
 
    
 
    } 
 
    
 
});

ul { 
 
    list-style-type: none; 
 
    border: 1px solid black; 
 
    background-color: white; 
 
} 
 

 
a { 
 
    display: block; 
 
    height: 30px; 
 
    line-height: 30px; 
 
} 
 

 
li:hover div { 
 
    display: block; 
 
} 
 

 
li div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a href="google.com">Google</a> 
 
    <div> 
 
     <a href="gmail.com">GMail</a> 
 
     <a href="maps.google.com">Maps</a> 
 
    </div> 
 
    </li> 
 
</ul>

Идея: Нужно preventDefault для первого звена до дополнительных ссылок расширен. На рабочем столе вы не заметите разницу (если вы удаляете правило CSS: hover CSS и пытаетесь нажать на первую ссылку, это не сработает, поскольку остальные ссылки скрыты). Правильное поведение: пользователь набирает первую ссылку, видит других, и после этого он может нажать на первую ссылку.

Проблема начинается с мобильных телефонов с тех пор, как наведите курсор мыши и щелкните на них. Когда пользователь нажимает на первую ссылку, он будет выполнять href, хотя дополнительные ссылки были скрыты в момент нажатия. Но поскольку правило: hover применяется одновременно с нажатием на ссылку, JS рассматривает его так, как будто ссылки уже открыты и не препятствуют умолчанию. Означает, что мой текущий оператор IF ЛОЖЬ на мобильных устройствах за секунду до фактического щелчка. Пожалуйста, помогите мне найти правильный подход.

Решение без использования jquery-mobile приветствуется! Спасибо!

Answer 1

Это возможное решение: Всегда запускайте preventDefault. И основываясь на видимости div, решите показать ссылки или перейти на href.

$('li').children('a').on('click', function(e) { 
 
\t 
 
    e.preventDefault(); 
 
    var $links = $(this).siblings('div'); 
 
    
 
    if ($links.is(':hidden')) { 
 
    $links.show(); 
 
    } else { 
 
    window.location.href = this.href; 
 
    } 
 
    
 
});

ul { 
 
    list-style-type: none; 
 
    border: 1px solid black; 
 
    background-color: white; 
 
} 
 

 
a { 
 
    display: block; 
 
    height: 30px; 
 
    line-height: 30px; 
 
} 
 

 
li:hover div { 
 
    display: block; 
 
} 
 

 
li div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a href="google.com">Google</a> 
 
    <div> 
 
     <a href="gmail.com">GMail</a> 
 
     <a href="maps.google.com">Maps</a> 
 
    </div> 
 
    </li> 
 
</ul>

PS: Это более вероятно, будет проблемой пользовательский опыт для меня. На сенсорных устройствах у нас действительно нет события hover. Поэтому трудно обеспечить тот же опыт, что и рабочий стол. Обычно на мобильных устройствах будет немного отличаться дизайн, например, выпадающее меню переключает на tap или touchstart событиях в этом случае.