[英]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.