javascript - 根据 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 被推到 800px，因为侧面板的宽度为 200px。当两个侧面板都打开时，“内容”div 为 600px。

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

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

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

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

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

提前致谢:)

B.

[编辑]

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

Answer 1

很确定 var 是你的错误。

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