根据 div 的宽度动态切换类

Question

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

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

例如：当sidepanel-left 和right 都靠近时，“content” div 的宽度为1000px。当一个侧面板打开时，“内容” div 被推到 800 像素，因为侧面板是 200 像素宽度。当两个侧面板都打开时，“内容”div 为 600px。

我想要一个脚本，当“内容”div 小于/大于 700 像素时，它可以动态添加/删除“.small”类。

这样，如果您打开或关闭任何或两个侧面板，“内容”div 将接收它的类“.small”，而无需调整窗口大小或重新加载页面。

我将使用该类在“内容”div 中隐藏/显示其他 div。

我已经尝试过这个插件 (http://benalman.com/code/projects/jquery-resize/examples/resize/)，但它不会动态添加/删除类。当我打开两个侧边栏时它会添加类，但如果我关闭一个，这使得 div“内容”大于 700px，它不会删除它。

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

提前致谢:)

B.

[编辑]

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

Answer 1

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

Answer 2

很确定var 是您的错误。

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