【问题标题】:how to turn off sliding responsive menu in wordpress responsive select menu plugin?如何在 wordpress 响应式选择菜单插件中关闭滑动响应式菜单?
【发布时间】:2015-11-30 13:29:59
【问题描述】:

我在 wordpress 中使用 WP Responsive Select Menu 插件,我在移动设备上观看网站时有响应式菜单。

在我基于 IOS 的手机中,当我向左滚动屏幕时(有时向下滚动时),响应式菜单会自动打开。 我的.js文件如下:

` // 开始代码

    jQuery(document).ready(function( $ ) {
    var bar = $('#wpresmenu_bar'), //top bar that shows/hides the menu
    bar_height = bar.outerHeight(true), //the bar height
    from_width = wpresmenu.from_width,
    menu = $('#wpresmenu_menu'), //the menu div
    menu_ul = $('#wpresmenu_menu_ul'), //the menu ul
    menu_a = menu.find('a'), //single menu link
    body = $('body'),
    html = $('html'),
    animation_speed = 300,
    ab = $('#wpadminbar'),
    menu_enabled = (bar.length > 0 && menu.length > 0)? true : false,
    menu_width = menu.width(),
    target_height = (window.innerHeight < body.height())? body.height() : window.innerHeight,
    target_width = (window.innerWidth < body.width())? body.width() : window.innerWidth;
    if(menu_enabled) {      
    menu_ul.find('li').first().css({'border-top':'none'});
    $(document).mouseup(function (e) {
        if ( !menu.is(e.target) && menu.has( e.target ).length === 0) {
            if(menu.is(':visible') && (!menu.hasClass('top'))) {
                $.sidr('close', 'wpresmenu_menu');
            }
        }
    });
    //ENABLE NESTING

    //add arrow element to the parent li items and chide its child uls
    menu.find('ul.sub-menu').each(function() {
            var sub_ul = $(this),
            parent_a = sub_ul.prev('a'),
            parent_li = parent_a.parent('li').first();

        parent_a.addClass('wpresmenu_parent_item');
        parent_li.addClass('wpresmenu_parent_item_li');

        var expand = parent_a.before('<span class="wpresmenu_icon wpresmenu_icon_par icon_default"></span> ').find('.wpresmenu_icon_par');

        sub_ul.hide();
    });

    //adjust the a width on parent uls so it fits nicely with th eicon elemnt
    function adjust_expandable_items() {
        $('.wpresmenu_parent_item_li').each(function() {
            var t = $(this),
                main_ul_width = 0,
                icon = t.find('.wpresmenu_icon_par').first(),
                link = t.find('a.wpresmenu_parent_item').first();

            if(menu.hasClass('top')) {
                main_ul_width = window.innerWidth;
            } else {
                main_ul_width = menu_ul.innerWidth();
            }

            if(t.find('.wpresmenu_clear').length == 0) link.after('<br class="wpresmenu_clear"/>');
        });
    }
    adjust_expandable_items();

    //expand / collapse action (SUBLEVELS)
    $('.wpresmenu_icon_par').on('click',function() {
        var t = $(this),
            //child_ul = t.next('a').next('ul');
            child_ul = t.parent('li').find('ul.sub-menu').first();
        child_ul.slideToggle(300);
        t.toggleClass('wpresmenu_par_opened');
        t.parent('li').first().toggleClass('wpresmenu_no_border_bottom');
    });

    //helper - close all submenus when menu is hiding
    function close_sub_uls() {
        menu.find('ul.sub-menu').each(function() {
            var ul = $(this),
                icon = ul.parent('li').find('.wpresmenu_icon_par'),
                li = ul.parent('li');

            if(ul.is(':visible')) ul.slideUp(300);
            icon.removeClass('wpresmenu_par_opened');
            li.removeClass('wpresmenu_no_border_bottom');
        });
    }

    //fix the scaling issue by adding/replacing viewport metatag
    var mt = $('meta[name=viewport]');
    mt = mt.length ? mt : $('<meta name="viewport" />').appendTo('head');
    if(wpresmenu.zooming == 'no') {
        mt.attr('content', 'user-scalable=no, width=device-width, maximum-scale=1, minimum-scale=1');
    } else {
        mt.attr('content', 'user-scalable=yes, width=device-width, initial-scale=1.0, minimum-scale=1');
    }

    //Additional fixes on change device orientation
    if( $.browser.mozilla ) {
        screen.addEventListener("orientationchange", function() {updateOrientation()}); //firefox
    } else if( window.addEventListener ) {
        window.addEventListener('orientationchange', updateOrientation, false);
    }
    else {
        window.attachEvent( "orientationchange" );
    }
    function updateOrientation() {
        window.scrollBy(1,1);
        window.scrollBy(-1,-1);

        menu_width = menu.width();

        //update the page posion for left menu
        if(menu.is(':visible') && menu.hasClass('left')) {
            body.css({'left':menu_width});
            body.scrollLeft(0);
        }
    }




    //apply the SIDR for the left/right menu
    if(menu.hasClass('left') || menu.hasClass('right')) {

        //appy sidr
        var hor_pos = (menu.hasClass('left'))? 'left' : 'right';
        bar.sidr({
            name:'wpresmenu_menu',
            side: hor_pos,
            speed: animation_speed,
            onOpen: function(){ bar.addClass('menu_is_opened'); },
            onClose: function(){ bar.removeClass('menu_is_opened'); close_sub_uls();  }
        });

        //when link is clicked - hide the menu first and then change location to new page
        menu_a.on('click', function(e) {
            $.sidr('close', 'wpresmenu_menu');
        });

        if( wpresmenu.swipe != 'no' ) {
            $('body').touchwipe({
                wipeLeft: function() {
                  // Close
                  $.sidr('close', 'wpresmenu_menu');
                },
                wipeRight: function() {
                  // Open
                  $.sidr('open', 'wpresmenu_menu');
                },
                min_move_x: 60,
                min_move_y: 60,
                preventDefaultEvents: false
            });
        }

        $(window).resize(function(){
            target_width = (window.innerWidth < body.width())? body.width() : window.innerWidth;
            if(target_width > from_width && menu.is(':visible')) {
                $.sidr('close', 'wpresmenu_menu');
            }
        });


    } else if(menu.hasClass('top')) { //The top positioned menu

        body.prepend(menu);

        //show / hide the menu
        bar.on('click', function(e) {

            //scroll window top
            $("html, body").animate({ scrollTop: 0 }, animation_speed);

            close_sub_uls();
            menu.stop(true, false).slideToggle(animation_speed);


        });


        //when link is clicked - hide the menu first and then change location to new page
        menu_a.on('click', function(e) {
            e.preventDefault();
            var url = $(this).attr('href');

            menu.slideUp(animation_speed,function() {
                //go to the url from the link
                window.location.href = url;
            });
        });


        $(window).resize(function(){
            target_width = (window.innerWidth < body.width())? body.width() : window.innerWidth;
            if(target_width > from_width && menu.is(':visible')) {
                close_sub_uls();
                menu.slideUp(animation_speed, function() {});
            }
        });


    } //end if class left / top /right

} //end if menu enabled

}); `

我不希望在向左或向右滑动屏幕时加载菜单。知道该怎么做吗?

【问题讨论】:

  • 您的问题过于宽泛,请尝试针对具体问题寻求技术建议,而不是寻求完整的解决方案。
  • 我已经上传了.js代码,你能帮我看看吗??
  • See the guidelines for asking good questions。尝试显示程序在哪一行代码中的行为不是您所期望的。如果需要超过一分钟的时间才能看到问题出现在程序中的哪个位置,那么没有人会愿意帮助您。

标签: menu responsive-design wordpress


【解决方案1】:

我想通了。

注释掉下面的代码会停止它。

 if( wpresmenu.swipe != 'no' ) {
        $('body').touchwipe({
            wipeLeft: function() {
              // Close
              $.sidr('close', 'wpresmenu_menu');
            },
            wipeRight: function() {
              // Open
              $.sidr('open', 'wpresmenu_menu');
            },
            min_move_x: 60,
            min_move_y: 60,
            preventDefaultEvents: false
        });
    }

:)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-04-05
    • 1970-01-01
    • 2019-07-12
    • 2015-06-06
    • 2017-09-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多