簡體   English   中英

移動的jQuery下拉菜單無法正常運行

[英]JQuery drop down for mobile not working the way it should

好的,這是一筆交易,我是一名學生,正在我的最終網站上上課,我們需要在網站上添加一些javascript / jquery。 我不想發瘋,所以我只是選擇了移動設備的下拉菜單。 我唯一的問題是,如果我在導航的“教程”按鈕中鏈接了頁面,它將自動轉到該頁面,並且不允許我再次點擊教程。 我希望這是有道理的,如果沒有請告訴我。 我的導航標記是...

<nav role="navigation" aria-label="Main menu">

<ul role="menubar">
<li role="menuitem" tabindex="0"><a href="index.html" class="mainmenu">Home</a></li>
<li class="mainmenu" role="menuitem" aria-haspopup=true tabindex="0"><a href="production.html" class="mainmenu">Tutorials</a>

<ul class="submenu" role="menu" aria-hidden=true>

<li role="menuitem" tabindex="-1"><a href="pre-pro.html">Pre-Production</a></li>
<li role="menuitem" tabindex="-1"><a href="production.html">Production</a></li>
<li role="menuitem" tabindex="-1"><a href="post.html">Post</a></li>

</ul>
</li>
<li role="menuitem" tabindex="0"><a href="films.html" class="mainmenu">Films</a></li>
</ul>
</nav>

我發現的JQuery插件如下...

;(function( $, window, document, undefined )
{
    $.fn.doubleTapToGo = function( params )
    {
        if( !( 'ontouchstart' in window ) &&
            !navigator.msMaxTouchPoints &&
            !navigator.userAgent.toLowerCase().match( /windows phone os 7/i ) ) return false;

        this.each( function()
        {
            var curItem = false;

            $( this ).on( 'click', function( e )
            {
                var item = $( this );
                if( item[ 0 ] != curItem[ 0 ] )
                {
                    e.preventDefault();
                    curItem = item;
                }
            });

            $( document ).on( 'click touchstart MSPointerDown', function( e )
            {
                var resetItem = true,
                    parents   = $( e.target ).parents();

                for( var i = 0; i < parents.length; i++ )
                    if( parents[ i ] == curItem[ 0 ] )
                        resetItem = false;

                if( resetItem )
                    curItem = false;
            });
        });
        return this;
    };
})( jQuery, window, document );

這是我在這里找到插件http://osvaldas.info/drop-down-navigation-sensitive-and-touch-friendly的地方 ,以防您需要參考。 感謝您的任何幫助。 干杯!

從示例頁面的來源:

<script>
$( function()
{
    $( '#nav li:has(ul)' ).doubleTapToGo();
});
</script>

暫無
暫無

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

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