Question

我的目标是在调整窗口大小时动态更改div的高度。

将jQuery包装在$(window).smartresize(function () { }之类的函数中时，我成功了，但是，这打破了功能的另一个区域。

HMTL

<section id="menu">

    <div class="menu-container">

        <ul class="menu__nav">
            <!-- menu nav  -->
        </ul>

        <div class="menu__main">
            <!-- content -->
        </div>

        <div class="menu__main">
            <!-- content -->
        </div>

        <div class="menu__main">
            <!-- content -->
        </div>

    </div>

</section>

的jQuery

( function($) {

    $(document).ready(function() {

        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);

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

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

                l = l - $this.outerWidth();

            });

            $contain.height($mmenu.eq(0).height());

            $mnav_a.on('click', function(e) {

                e.preventDefault();
                var $this = $(this);

                if (!$this.hasClass('active')) {

                    $mmenu.stop(true, true);

                    $mnav_a.removeClass('active');
                    $this.addClass('active');

                    $mmenu.filter($('.active'))
                        .removeClass('active')
                        .fadeOut(250)
                        .animate({left:l+"px"}, 250);

                    var $target = $mmenu.filter($this.attr('href'));

                    $contain.animate({height:$target.height()}, 250);

                    $target.addClass('active')
                        .fadeIn(250)
                        .animate({left:0}, 250);
                }

                $this.blur();
            });
        }
    });

} ) ( jQuery );

这是我最感兴趣的领域：

$mmenu.each(function(z) {

    var $this = $(this);

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

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

    l = l - $this.outerWidth();

});

$contain.height($mmenu.eq(0).height());

如果您需要更多信息，请告诉我，希望有一个简单的解决方法，谢谢

Answer 1

我认为你可以使用窗口百分比来调整CSS大小。您可以为某些特定尺寸的设备定义百分比。我只是以功能性为例创建这个css。

@media (max-width: 480px) {
    #divMenu {
        width:40%;
        height:70%;
    }
}

@media (min-width: 480px) and (max-width: 1023px) {
    #divMenu {
        width:70%;
        height:80%;
    }
}

@media (min-width: 1024px) {
    #divMenu {
        width:50%;
        height:50%;
    }
}

抱歉，我的英语很差。

使用jQuery在窗口大小调整上计算div高度

1 个答案: