jquery – 根据窗口大小动态改变类名

我正在使用Twitter Bootstrap创建一个响应式站点,使用以下布局(简化为此问题)：

<div class="container-fluid">
    <div class="row-fluid">
        <!-- Left menu -->
        <div class="span2">
            <div class="sidebar-nav">
                MENU CONTENT GOES HERE
            </div>
        </div>

        <!-- Content -->
        <div id="mainContent" class="span7">
            MAIN CONTENT GOES HERE
        </div>

        <!-- Right column -->
        <div id="rightColumn" class="span3 hidden-phone hidden-tablet">
            RIGHT COLUMN GOES HERE
        </div>
    </div>
</div>

当浏览器窗口调整为平板电脑大小时,rightColumn div将按预期方式进行隐藏 – 但它会在mainContent div旁边留下空格(大小为span3).

我想让mainContent div扩展到全宽(所以填写大小匹配span10).

我正在使用以下jQuery代码来动态地更改mainContent div的类名,以获得这个(并且如预期的那样工作)：

$(document).ready(function() {
    var $window = $(window);

        // Function to handle changes to style classes based on window width
        function checkWidth() {
        if ($window.width() < 980) {
            $('#mainContent').removeClass('span7').addClass('span10');
            };

        if ($window.width() >= 980) {
            $('#mainContent').removeClass('span10').addClass('span7');
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
        $(window).resize(checkWidth);
});

我的问题是：当浏览器窗口调整大小时,这是处理Twitter Bootstrap中跨越变化的首选方法吗？或者我应该只是为了跨平台屏幕尺寸更改span7的CSS以匹配span10？

解决方法

我会自己回答：我删除了JavaScript代码,并将其替换为Bootstrap CSS,将span7的宽度更改为与span10相同的宽度,用于平板电脑屏幕尺寸：

@media (max-width: 979px) and (min-width: 768px) {
    .row-fluid .span7 {
    width: 82.87292817100001%;
    }
}

jquery – 根据窗口大小动态改变类名

解决方法

猜你在找的jQuery相关文章