簡體   English   中英

jQuery插件響應式菜單

[英]JQuery plugin responsive menu

我對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>

查詢

;(function($){

// 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/jquery-ui-contextmenu 它具有處理觸摸設備輸入的方法。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM