调整大小

Question

我的问题在下面的笔上给出

http://codepen.io/dingo_d/pen/oXBYjW

我有一个工作菜单。在移动宽度（<700px）和普通浏览器（＆gt; 1170px）中。

如果您刷新这些尺寸的笔，并单击菜单项，一切正常。在任何尺寸。

然而，在调整大小时，控制动画的切换功能部分不能正常工作。此代码位于header_toggle()函数

中

        $menu_toggle.on('click', function (e) {
            if ($(window).width()<960) {
                $(this).toggleClass('mobile_open');
                if ($(this).hasClass('mobile_open')) {
                    $navigation.fadeIn().animate({width: '70%'},250);
                } else{
                    $navigation.animate({width: '0' },250).fadeOut();
                }
            } else{
                $(this).toggleClass('open');
                if ($(this).hasClass('open')) {
                    $breadcrumbs_bar.toggle('slide', {direction: 'up'}, 250, function () {
                        $navigation.toggle('slide', {direction: 'down'}, 250).css('display', 'inline-block');
                    });
                } else {
                    $navigation.toggle('slide', {direction: 'down'}, 250, function () {
                        $breadcrumbs_bar.toggle('slide', {direction: 'up'}, 250).css('display', 'inline-block');
                    });
                }
            }
            e.preventDefault();
        });

就像调整大小一样，当你在函数内部时，if语句不能一直运行？任何解决方法？

我最关心的问题是，如果有人在平板电脑上，并将其翻转，并且正好在决议之间，那么这个问题就会发生。

在大小超过960像素的情况下，动画会上下滑动，切换的类别为open，低于您的淡入淡出和宽度动画以及类切换mobile_open。

使用css完成所有操作是不可能的，因为使用css（使用transform属性）的向上和向下滑动动作只有在我为容器隐藏溢出时才有效，但是如果我有一个drop向下菜单，溢出应该是可见的。

调整大小代码：

$(window).on('resize',function(){
    toggle_menu();
    header_toggle();
    if ($(window).width()>767) {
        if ($main_header.has($navigation)) {
            $navigation.detach().appendTo('.menu_wrapper');
        }
    } else{
        $navigation.detach().prependTo('body');
    }

});

小提琴具有所有jquery代码。

Answer 1

我刚刚完成了一个类似于你想要做的菜单。

看看这个codepen：http://codepen.io/anon/pen/YXZgYR

<强> isMobile（）

检查窗口是否处于Mobile分辨率的功能。

setMenuType（）

在页面加载时和窗口调整大小时向导航栏添加/删除类的功能。

<强> windowResize（）

我包含了setTimeout，因此只有在窗口调整大小时才会运行该函数。

希望这可以帮助您了解如何进行移动/桌面导航栏/菜单。

$(document).ready(function() {

  function isMobile() {
    if (window.innerWidth < 767) {
      return true;
    }
  }

  setMenuType();     

  function setMenuType() {
    if (isMobile()) {
      $('nav').removeClass('desktop');
      $('nav').addClass('mobile');
    } else {
      $('nav').removeClass('mobile');
      $('nav').addClass('desktop');
    }
  }

  var resizeId;
  $(window).resize(function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(setMenuType(), 500);
  });
});