Плагин JQuery, адаптивное меню

0

Я новичок в 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);

Теги:
plugins
drop-down-menu

1 ответ

0

Я действительно мало знаю о адаптивном навигационном подключаемом модуле. Но нам нужно обрабатывать события касания по-разному. Вы можете просто включить библиотеку из http://touchpunch.furf.com для сенсорных событий.

Если вы ищете только контекстное меню, вы можете попробовать использовать https://github.com/mar10/jqueryu-ui-contextmenu. Он имеет способы обработки входов сенсорных устройств.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню