Javascript mobileMenuToggle 函数需要随网站一起加载

Question

我是 stackoverflow.com 的新手，正在寻找一些代码帮助，希望你能帮助我。

这是网站 http://newwebdemo.com/builf/

如果您在移动设备上打开此网站或将窗口调整为更小，您会看到一个 mobileMenuToggle 将出现，而不是网站的正常桌面菜单!

我现在想要的是当我点击它时菜单下拉并再次点击它时关闭，我需要它在网站加载时默认打开，当我点击它时我可以关闭它，

这是这部分的代码，您的帮助将解决我的问题

    if(navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Android/i)) {

    $('#header-wrapper').addClass('is_tablet');

    $('#header-inner .mobile-nav').css('display','block');

    $('#header-inner ul.navigation, #header-inner ul.mobile-navigation').css('display','none');

    $('#header-inner .mobileMenuToggle').css('display','block');

    $('.menu').not('.mobile-nav .menu').css({display:'none'});

}

$('.mobileMenuToggle a').on('click', function() {

    if($(this).hasClass('open')) {

        $('ul.mobile-navigation').slideUp(400,'easeInOutQuint');

        $(this).removeClass('open');

    } else {

        $('ul.mobile-navigation').slideDown(400,'easeInOutQuint');

        $(this).addClass('open');

    }

    return false;

});

它目前正在做的是将类名“open”添加到

<div class="mobileMenuToggle"><a href=""></a></div>

当你点击它时，代码会发生变化，菜单会向下滑动并打开

<div class="mobileMenuToggle"><a href="" class="open"></a></div>

您可以看到，一旦我在移动设备或较小尺寸的浏览器中点击菜单，它会在点击时打开菜单，我希望它默认通过网站打开!

有人可以帮忙吗？

Answer 1

只需在附加点击事件后添加一个触发器，例如:

    if(navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Android/i)) {

    $('#header-wrapper').addClass('is_tablet');

    $('#header-inner .mobile-nav').css('display','block');

    $('#header-inner ul.navigation, #header-inner ul.mobile-navigation').css('display','none');

    $('#header-inner .mobileMenuToggle').css('display','block');

    $('.menu').not('.mobile-nav .menu').css({display:'none'});

}

$('.mobileMenuToggle a').on('click', function() {

    if($(this).hasClass('open')) {

        $('ul.mobile-navigation').slideUp(400,'easeInOutQuint');

        $(this).removeClass('open');

    } else {

        $('ul.mobile-navigation').slideDown(400,'easeInOutQuint');

        $(this).addClass('open');

    }

    return false;

});
$(function() {
    $( window ).resize(function() {
        if (jQuery('.mobileMenuToggle').is(':visible')) { jQuery('.mobileMenuToggle a').click() }
    }).trigger('resize');
});

如果你想在调整大小时更新页面，那么你应该附加调整大小事件并跟踪其中的可见性..