jquery移动点击菜单答案

【问题标题】：jquery mobile tap menujquery移动点击菜单
【发布时间】：2014-04-17 15:55:48
【问题描述】：

我有这段代码，我正在尝试使用移动设备。我有一个带有子级别 .sub-menu 的 wordpress 菜单，它是为菜单构建的。我试图让主菜单切换第一级的下拉菜单，然后所有正在进行的级别都有一个.sub-menu类。这段代码似乎根本不起作用。我已经让它在我可以切换子菜单的地方工作，但是菜单会消失，我必须重新点击才能打开它。我哪里错了？

$(function() {

        $('#menu-menu li').bind("touchstart", function() {
            $(this).siblings('.sub-menu').toggle();
        });
        $('.sub-menu').bind("touchstart", function() {
            $(this).nextUntil('.sub-menu').toggle();
        });
});

【问题讨论】：

标签： jquery wordpress mobile menu touch

【解决方案1】：

好的，我想我已经解决了。我会在此处发布此内容，以防其他人将来看起来不需要它。

~这需要移动jquery库~

这花了我将近两天的时间才弄清楚，但我是 jquery/javascript 的新手，所以可能有点草率。如果可以的话，我总是愿意简化这一点。这对于 wordpress 来说非常棒，因为它建立在重建菜单的基础之上

//this is the touch screen mainMenu function
$(function touchNav() {
$(function mainMenu () {
    $(document).on('vmousedown', 'li', function(e) {
        var jthis = $(this);
        var jchildren = jthis.children('ul.sub-menu');
        if (e.target !== this) {
            return;
        } else {
            jthis.siblings().find('ul.sub-menu').slideUp('fast');
            jchildren.slideToggle('slow');
        }
        setTimeout(function() {
            if (jchildren.css("display") == "none") {
                jthis.find(".sub-menu").css("display", "none");
            };
        }, 700);
    });
});
//if click is not on mainMenu closeNav
$(document).on('vmousedown', function (e) {
    var jcontainer = $("#mainMenu");
    if (!jcontainer.is(e.target) && jcontainer.has(e.target).length === 0)
    {  jcontainer.find("ul.sub-menu").slideUp();
    }
}); 
});

Fiddle Here

【讨论】：