Ответ 1
Piddle Diddle Fiddle:)
Fiddle Embedded Demo (используйте для телефона самый простой доступ)
Прежде чем вы прочитаете эту стену текста, проверьте скрипку и убедитесь, что это то, что вы ищете. Тест на телефоне тоже (я тестировал на своем Android и не имел проблем).
Если у вас есть совершенно отдельный набор кода для мобильных телефонов, вам не о чем беспокоиться. Адаптация к событию touch и hover особенно сложна на устройствах iOS. Но я смог преодолеть это, захватив ряд событий мыши, которые были переведены на событие касания.
В вашем конкретном случае, поскольку вы хотите, чтобы это было так разное между тремя, я предложил бы запустить ранний script, чтобы получить размер экрана, и если он меньше ### px x ### px, добавьте класс под названием handheld или mobile или что-то еще до body. Теперь вам нужно назначить код захвата touch на $('.mobile .nav') и иметь отдельный фрагмент кода, назначающий событие hover для ПК.
Для планшетов вам нужно будет решить, что для вас важнее - возможность щелчка и навигации с помощью элемента корневого меню для каждого меню или только для щелчка по элементам подменю (что устранит необходимость для добавления класса .mobile в body).
Вот код, который вы можете использовать как на мобильном, так и на рабочем столе.
JQuery
jQuery(document).ready(function () {
$('.nav').on('click mousedown mouseup touchstart touchmove', 'a.has_children', function () {
if ( $(this).next('ul').hasClass('open') && !$(this).parents('ul').hasClass('open')) {
$('.open').removeClass('open');
return false;
}
$('.open').not($(this).parents('ul')).removeClass('open');
$(this).next('ul').addClass('open');
return false;
});
$(document).on('click', ':not(.has_children, .has_children *)', function() {
if( $('.open').length > 0 ) {
$('.open').removeClass('open');
return false;
}
});
});
Обычно я не копирую весь HTML-код, как я должен сделать, но в этом конкретном случае вам нужно принять его точно так же, как у меня есть здесь, чтобы избежать ошибки inline-block белого пробела. Сравните мою скрипту с вашим оригиналом и посмотрите, насколько проще навести/щелкнуть по каждой ссылке.
HTML:
<div class="header-nav-menu">
<ul class="nav">
<li><a href="#" onclick="location.href='http://www.google.com'; return false;">One</a></li><li>
<a class="has_children" href="#" onclick="location.href='http://www.google.com'; return false;">Two</a>
<ul>
<li><a href="#" onclick="location.href='http://www.google.com'; return false;">2A</a></li><li>
<a href="#" onclick="location.href='http://www.google.com'; return false;">2B</a>
</li>
<li><a href="#" onclick="location.href='http://www.google.com'; return false;">2C</a>
</li>
</ul>
</li><li>
<a class="has_children" href="#" onclick="location.href='http://www.google.com'; return false;">Three</a>
<ul>
<li><a href="#" onclick="location.href='http://www.google.com'; return false;">3A</a>
</li>
<li> <a class="has_children" href="#" onclick="location.href='http://www.google.com'; return false;">3B</a>
<ul>
<li><a href="#" onclick="location.href='http://www.google.com'; return false;">3BI</a>
</li>
<li><a href="#" onclick="location.href='http://www.google.com'; return false;">3BII</a>
</li>
<li><a href="#" onclick="location.href='http://www.google.com'; return false;">3BIII</a>
</li>
</ul>
</li>
<li><a href="#" onclick="location.href='http://www.google.com'; return false;">3C</a>
</li>
</ul>
</li><li>
<a href="#" onclick="location.href='http://www.google.com'; return false;">Four</a></li><li>
<a href="#" onclick="location.href='http://www.google.com'; return false;">Five</a></li>
</ul>
</div>
Довольно уверен, что я даже не коснулся CSS, поэтому я оставлю это в Fiddle на данный момент. Надеюсь, это поможет вам на вашем пути.