使用jQuery动态更改窗口大小调整上的CSS

Question

我正在建立一个餐厅菜单系统，所选菜单会在点击时滑过。

一切正常，但是，我现在正尝试使用窗口动态调整大小。

这有很大的困难，我的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()函数使用不当，所以对此有任何指导意见。第一个是设置各个菜单的高度，第二个是设置菜单容器的高度。

Answer 1

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

作为旁注，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 */
     }
}