Question

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

$(function() {

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

Answer 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

jquery移动点击菜单

1 个答案: