Question

我编写了这个脚本，它有效地隐藏了依赖于浏览器 window（）。width 的工具栏。我已经意识到，由于我希望工作宽度的方式..：

＆＃39; $ csspagewidth2 = $ csspagewidth * 2;＆＃39;

..而不是 window（）。width 我可以用这个来对抗＃DIV.width 。但是当我尝试将窗口（）。宽度更改为#main-content时。它无法工作。有人可以帮忙吗？

if ($("#main-content").width() < 600) {
       $( "#toolbarright").hide();
}
else {
        $("#toolbarright").show();
}

$("#main-content").resize(function() {
   windowWidth = $(this).width();//you need to use this for changable values
   if ( windowWidth < 600) {

       $( "#toolbarright").hide();

   } else if ( windowWidth > 600) {

        $("#toolbarright").show();

   }
 });

FIDDLE：http://jsfiddle.net/ablueman/vdgeLsgL/16/

背景：https://www.ablueman.co.uk/testbench/layout.php

Answer 1

$(main-content)将获取main变量（undefined）并从中减去content变量（也undefined），为您提供NaN ，然后将用于尝试实例化jQuery对象。它不会在DOM中找到任何匹配的元素。

您想要$("#main-content")

Answer 2

使用CSS轻松

@media only screen and (max-width: 320px){
       #toolbarright { display:none; }
}

DEMO1

更新1：

<强> JQuery的

$(window).on('resize', function(){
    $('#main-content').each(function(){
        var box = $(this);        
        var width = box.width();
        var height = box.height();
        if ( width < 600) {
            box.find( "#toolbarright").hide();
        } else if ( width > 600) {
            box.find("#toolbarright").show();
        }          
        $('.size').html(width+'x'+height+' (r: '+(width/height).toFixed(3)+')');
    });
}).trigger('resize');

<强> CSS

#main-content 
{
    margin: 120px;
    position: relative;
}
#toolbarright 
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow:hidden;
    outline: 1px solid grey;
    height:100px;
}

DEMO2

Answer 3

想出来：

$( document ).ready(function() {
if ($("#maincontent").width() < 600){
       $( "#toolbarright").hide();
} else { $("#toolbarright").show();}
});


$(window).resize(function() {
if ($("#maincontent").width() < 600){
       $( "#toolbarright").hide();
} else { $("#toolbarright").show();}
});

http://jsfiddle.net/ablueman/vdgeLsgL/

在#DIV而不是window（）上调用函数

3 个答案:

DEMO1

DEMO2