javascript - 双击Jquery滑动菜单即可

我在网站上使用的是jquery幻灯片菜单，如下所示：

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

然后，当我开始更新我的网站时，我看到了：

http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly/tag/touch

在移动设备上很不错，但只有一个级别的深度。

我试图将它们合并在一起，但是我不能。有可能做到吗？如果可以，怎么办？

//jqueryslidemenu.js

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIswith drop downs):
var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

var jqueryslidemenu={

animateduration: { over: 200, out: 100 }, //duration of slide in/ out animation, in milliseconds



buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
    var $mainmenu=$("#"+menuid+">ul")
    var $headers=$mainmenu.find("ul").parent()
    $headers.each(function(i){
        var $curobj=$(this)
        var $subul=$(this).find('ul:eq(0)')
        this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
        this.istopheader=$curobj.parents("ul").length==1? true : false
        $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
        $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
            '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
            +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
            + '" style="border:0;" />'
        )
        $curobj.hover(
            function(e){
                var $targetul=$(this).children("ul:eq(0)")
                this._offsets={left:$(this).offset().left, top:$(this).offset().top}
                var menuleft=this.istopheader? 0 : this._dimensions.w
                menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
                if ($targetul.queue().length<=1) //if 1 or less queued animations
                    $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
            },
            function(e){
                var $targetul=$(this).children("ul:eq(0)")
                $targetul.slideUp(jqueryslidemenu.animateduration.out)
            }
        ) //end hover
        $curobj.click(function(){
            $(this).children("ul:eq(0)").hide()
        })
    }) //end $headers.each()
    $mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready



}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

我想将此代码与下面的代码合并。我尝试过，但无法成功。我应该在哪里添加它？

// Doubletaptogo.js

;(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);


$(function () {
$('#myslidemenu li:has(ul)').doubleTapToGo();
});

谢谢

最佳答案

我要做的是在第一次单击时注册一个计时器，将该变量保存在插件范围内，然后再次访问它以确定是否已经经过了足够的时间将其确定为双击。我认为标准双击是750毫秒。

或者我相信jQuery具有内置的.dblclick()（可能仅在使用click事件的桌面上有效）。

我在网上找到了以下代码片段：

(function($) {
 $.fn.doubleTap = function(doubleTapCallback) {
     return this.each(function(){
        var elm = this;
        var lastTap = 0;
        $(elm).bind('vmousedown', function (e) {
                            var now = (new Date()).valueOf();
            var diff = (now - lastTap);
                            lastTap = now ;
                            if (diff < 250) {
                        if($.isFunction( doubleTapCallback ))
                        {
                           doubleTapCallback.call(elm);
                        }
                            }
        });
     });
}
})(jQuery);

关于javascript - 双击Jquery滑动菜单即可，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22483618/