0

我正在创建一个响应式 magento 主题，但遇到了问题。在正常窗口大小期间，我的菜单位置与 ipad /mobile 大小时不同。我想知道是否有一个 jQuery 命令允许您根据窗口大小删除一个类/ div，任何帮助将不胜感激。

以下是我尝试过但没有奏效的方法：

jQuery(window).resize(function() {
        var $j = jQuery;
        var windowwidth = $j(window).width();

        $j(windowwidth).onChange(function(){
            if (windowwidth < '148') {
                $j('.parent').css('display','relative');
            }
        });
    }

无法按照 css3 方法的建议使 jQuery 正常工作。@media 屏幕和（最大宽度：960px）{}

4

4 回答 4

5

您不能将事件侦听器放在数字 ( windowwidth) 上。您只需将该值与resize事件处理程序中所需的值进行比较。

resize每次窗口的宽度或高度发生变化时，处理程序都会触发。

您的代码应如下所示：

$(window).resize(function() {
    if ($(window).width() < 148) {
        $('.parent').css('display','relative');
    }
}

您还应该考虑为此使用CSS 媒体查询而不是 JS。

于 2013-08-30T13:26:54.693 回答
2

您可以按照 dcro 所说的方式使用 resize 事件处理程序和 windowwidth 进行操作，或者您也可以使用 @media 标记在 CSS 中创建这样的条件

@media screen and (max-width: 960px) {}

来源： http: //line25.com/tutorials/create-a-responsive-web-design-with-media-queries

@media 标签可能不适用于旧版浏览器

于 2013-08-30T13:33:13.787 回答
1

我建议为这类工作寻找 jRespond jquery 库。

https://github.com/ten1seven/jRespond

前任：

var jRes = jRespond([
        {
            label: 'small',
            enter: 0,
            exit: 1000
        },{
            label: 'desktop',
            enter: 1001,
            exit: 10000
        }
    ]);


    jRes.addFunc({
        breakpoint: 'small',
        enter: function() {
           $('#sidebarbg,#sidebar,#content').removeClass('hided');
        },
        exit: function() {
           $('.collapseBtn.top.hide').removeClass('top hide');
        }
    });

其绑定事件到定义的窗口大小来触发写入函数。

于 2013-08-30T13:31:41.453 回答
1

不过，这会起作用：

$(window).resize(function() {

    var windowwidth = $(window).width();

    if (windowwidth < '148') {
       $('.parent').css('display','relative');
       alert('see it works');
    }

});
于 2013-08-30T13:33:57.507 回答