根据div的宽度动态切换类

Question

所以我有一个带内容的容器和两个侧抽屉（左/右），打开时会挤压内容宽度。

<div class="container">
    <div">sidepanel-left</div>
    <div class="content">content</div>
    <div>sidepanel-right</div>
</div>

例如：当左侧和右侧板都关闭时，“内容”div的宽度为1000px。当一个侧面板打开时，“内容”div被推到800px，因为侧面板的宽度为200px。当两个侧面板都打开时，“内容”div为600px。

我想要一个脚本，当它小于/大于700px时，动态地将“.small”类添加/删除到“content”div。

这样，如果你打开或关闭任何一个或两个sidepanel，“content”div将收到它的类“.small”而不调整窗口大小或重新加载页面。

我将使用该类隐藏/显示“content”div中的其他div。

我试过这个插件（http://benalman.com/code/projects/jquery-resize/examples/resize/），但它不会动态添加/删除该类。当我打开两个侧边栏时它会添加类，但是如果我关闭一个，这使div“content”大于700px，它将不会删除它。

jQuery(document).ready(function($) {    
     $(".content").resize(function() {
        if ($(".content").width() < 700 ) {
           $('.content').addClass('small');
        } else {
            $('.content').removeClass('small');
        }
    });
}); 

提前致谢：）

乙

[编辑]

网站是：www.unicyclist.info 单击右上角和左上角的[...]可激活侧面板。

Answer 1

非常确定var是你的错误。

jQuery(document).ready(function($) {    
    $(".content").resize(function() {
        $(this).toggleClass('small', ($(this).width() < 700) );    
    });
}); 

Answer 2

JQuery resize（）仅在浏览器窗口更改时触发！

您可以创建自己的函数来检查div的大小是否已更改：

contentWidth = -1;

function checkForSizeChange() {
    var $content = $('.content'),
        width = $content.width();

    if(contentWidth != width) {
        if(width < 700) {
            $content.addClass('small');
        } else {
            $content.removeClass('small');
        }       
        contentWidth = width;
    }
}

setInterval(checkForSizeChange, 100);