Типичная проблема с выпадающим меню меню CSS с iPad

Question

У нас общая проблема с состояниями наведения и меню CSS на iPad. Поскольку он не распознает состояния зависания, он не позволяет выбирать.

Мы использовали большинство обходных решений, таких как onClick="return true", и используя jQuery для создания динамического класса hover для репликации: hover и несколько других, которые я сейчас удалил, чтобы немного очистить код. Я уверен, что нам не хватает чего-то, что должно быть очевидно.

Любая помощь, указывающая на меня в правильном направлении, была бы весьма признательна.

Ссылка: iar.suissamesser.com

Answer 1

Я предполагаю, что вы говорите о меню, правильно? Что я делаю в этом случае, добавляет еще одну строку в мой селектор css :hover. Идея заключается в том, что при щелчке добавьте класс в #nav, например 'btn1. Это также потребует, чтобы вы добавили класс в свои элементы списка.
CSS

#nav li:hover > ul, 
#nav.btn1 li.btn1 > ul { 
    display: block; 
} 

HTML

<ul class="clearfix btn1" id="nav"> 
    <li class="btn1"><a href="http://iar.suissamesser.com/about-us/campus">ABOUT US</a><br /> 
    <ul> 
     <li><a href="http://iar.suissamesser.com/about-us/campus">Campus</a></li> 
     <li><a href="http://iar.suissamesser.com/about-us/history-mission">History &amp; Mission</a></li> 
    </ul> 
    </li> 
    <li class="btn2"><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses" >PARENTS</a><br /> 
    <ul> 
     <li><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses">Accreditation and Licenses</a></li> 

JS

$("#nav > li > a").on("click", toggleNav); 
var toggleNav = function(evt){ 
    var clicked = $(this).parent().attr('class'); 
    $("#nav").removeClass("btn1 btn2 btn3 btn4 ...").addClass(clicked); 
    evt.preventDefault(); 
} 

Answer 2

Вы должны смотреть на пример здесь http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/

Это довольно прямо вперед оттуда. Удачи,

Answer 3

Включите следующий код в файл колонтитула

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { 
e.stopPropagation(); 
} 

Answer 4

это поздно поздно поздно Respo nse, но.

Вы действительно не должны использовать какой-либо jquery или код, вам просто нужно запутать или переопределить ipad-логику в css.

попробовать это в вашем CSS

.navigation li ul 
{ 
display:none; 
} 
.navigation li:hover ul 
{ 
display:block; 
} 
.navigation > li:hover 
{ 
background-color:#000; 
} 

, как я понимаю, это останавливает Ipad каскадный в литий, и вы попав в HREF, потому что вы сделали парить на ли, но, когда меню саба open, a становится следующим ответчиком, потому что li уже имеет активное состояние.

это было обнаружено случайно.

HTML будет как этот

<ul class="navigation"> 
<li><a href="http://www.google.com">test link</a> 
<ul> 
<li><a href="#">link</a></li> 
<li><a href="#">link</a></li> 
<li><a href="#">link</a></li> 
<li><a href="#">link</a></li> 
</ul> 
<li><a href="#www.google.com">test link</a> 
<li><a href="#www.google.com">test link</a> 
</ul>