使用jQuery动态更改窗口上的CSS resize使用jQuery

我正在构建一个餐厅菜单系统，通过点击选择的菜单可以滑过。使用jQuery动态更改窗口上的CSS resize使用jQuery

一切工作正常，但是，我现在试图使它动态调整窗口大小。

有这个巨大的困难，我的jQuery是磨磨蹭蹭好，但碰了壁...

jQuery的

var $mmenu = $('.menu__main'); 

if ($mmenu.length > 0) { 

    var $mnav = $('.menu__nav'), 
     $mnav_a = $mnav.find('a'), 
     m = parseInt($mnav.outerHeight(true), 10), 
     $contain = $mmenu.closest('.menu-container'), 
     h = 0, 
     l = 0; 

    $mmenu.not(':eq(0)').hide(); 
    $mmenu.eq(0).addClass('active'); 
    $mnav_a.eq(0).addClass('active'); 

    $mmenu.each(function(z) { 

     var $this = $(this), 
      $mmenuHeight; 

     $(window).smartresize(function() { 
      $mmenuHeight = parseInt($this.outerHeight(true), 10) + m; 
     }); 

     $this.css('height','auto'); 

     $this.css({ 
      zIndex: z+1, 
      position: 'absolute', 
      top: m + "px", 
      left: l, 
      height: $mmenuHeight + "px" 
     }); 

     l = l - $this.outerWidth(); 

    }); 

    $(window).smartresize(function() { 
     $contain.height($mmenu.eq(0).height()); 
    }); 

} 

$(window).trigger("smartresize");

两个$(window).smartresize()功能使用不当，我知道，所以任何对此的指导将不胜感激。第一个是设置单个菜单的高度，第二个是菜单容器的高度。

enter image description here

来源

2014-04-14 Sam Holguin

你有没有想过使用媒体查询，而不是jQuery来做到这一点？ –

我有，但客户端可以完全控制菜单，包括存在的金额和内容。它需要是动态变化的东西 –

你绝对应该使用媒体查询这样的工作的。它更容易并得到广泛的支持。我不确定为什么你需要定位绝对所有的菜单项。您可以使用悬停并结合相对定位或变换完成滑出功能。这样你就不必担心设置个人身高。

作为一个方面说明，Web应用程序的功能将被动态调整或仅在初始加载时调整大小？

DOCS

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries?redirectlocale=en-US&redirectslug=CSS%2FMedia_queries

您的代码可能看起来像

@media screen and (max-width:/* your desired breakpoint*/) { 
    .menu li { 
      width:100%; 
      max-width:/* the maximum size that you want you menu item to be */ 
    } 
}

来源

2014-04-14 15:33:54

我是媒体查询的大用户，并且我正在使用它们来构建构建的各个方面。但它是菜单高度需要动态设置，而不是宽度。把它放到上下文中，一个菜单可能是400px，另一个菜单可能是1500px，我需要点击它们之间的动画 –

嗯，你可以添加一个截图，也许我可以帮助:)如果你删除高度值并使项目阻止应该计算内容的高度否？ –

任何帮助将不胜感激..菜单系统的建立方式，高度必须声明，不幸的是它需要在飞行中改变:)在主要问题的屏幕为你 –

使用jQuery动态更改窗口上的CSS resize使用jQuery

回答

相关问题