Я новичок в jquery, и я пытаюсь научиться эффективно использовать его на веб-сайте. Я работаю над гибким навигационным плагином, который я нашел в Интернете. Моя проблема с плагином заключается в том, что выпадающее меню работает, но когда оно переходит на мобильный, стрелка, которая активирует раскрывающееся меню, не работает. Теперь я не знаю, правильно ли я запускаю скрипт или что не так с скриптом jquery. Может ли кто-нибудь быть любезным, чтобы помочь и, возможно, объяснить, почему все работает или не работает. Благодарю!
<nav class="nav">
<ul class="nav-list">
<li class="nav-item">
<a href="#">HOME</a>
</li>
<li class="nav-item">
<a href="#">PORTFOLIO</a>
<ul class="nav-submenu">
<li class="nav-submenu-item">
<a href="#">STUDIO</a>
</li>
<li class="nav-submenu-item">
<a href="#">PORTRAITS</a>
</li>
<li class="nav-submenu-item">
<a href="#">SPORTS</a>
</li>
<li class="nav-submenu-item">
<a href="#">WEDDING</a>
</li>
<li class="nav-submenu-item">
<a href="#">ADVENTURE</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#">ABOUT</a>
</li>
<li class="nav-item">
<a href="#">NEWS</a>
</li>
<li class="nav-item">
<a href="#">CONTACT</a>
</li>
</ul>
</nav>
Jquery
; (функция ($) {
// DOM ready
$(function() {
// Append the mobile icon nav
$('.nav').append($('<div class="nav-mobile"></div>'));
// Add a <span> to every .nav-item that has a <ul> inside
$('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
// Click to reveal the nav
$('.nav-mobile').click(function(){
$('.nav-list').toggle();
});
// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){
// Toggle the nested nav
$(this).siblings('.nav-submenu').toggle();
// Toggle the arrow using CSS3 transforms
$(this).children('.nav-arrow').toggleClass('nav-rotate');
});
});
}) (Jquery);
Я действительно мало знаю о адаптивном навигационном подключаемом модуле. Но нам нужно обрабатывать события касания по-разному. Вы можете просто включить библиотеку из http://touchpunch.furf.com для сенсорных событий.
Если вы ищете только контекстное меню, вы можете попробовать использовать https://github.com/mar10/jqueryu-ui-contextmenu. Он имеет способы обработки входов сенсорных устройств.