使用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

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 */
     }
}