Question

我正在使用bootstrap 3并希望通过将btn-sm类添加到锚点上的类列表来使我的按钮下拉到btn-sm。

这就是我的尝试。

(function ($) {
    var $window = $(window),
        $btn = $('btn');

    function resize() {
        if ($window.width() < 750) {
            return $btn.addClass('btn-sm');
        }

        $btn.removeClass('btn-sm');
    }

    $window.resize(resize)
        .trigger('resize');
})(jQuery);

到目前为止失败了。

Answer 1

第三行btn必须是一个类 $btn = $('.btn');

Answer 2

只需使用CSS媒体查询，让浏览器付出艰苦的努力：

@media screen and (max-width: 749px) {
    .btn {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
}

Answer 3

首先添加该类，然后使用return

(function ($) {
    var $window = $(window),
    $btn = $('btn');

    function resize() {
        if ($window.width() < 750) {
            $btn.addClass('btn-sm');
            return;
        }

        $btn.removeClass('btn-sm');
    }

    $window.resize(resize)
    .trigger('resize');
})(jQuery);

Answer 4

你需要'选择'那样：

$(window).resize(function() {
    if($(window).width() < 750) {
        $(".btn").addClass("btn-sm");
    } else if($(window).width() > 750) {
        $(".btn").removeClass("btn-sm");
    }
});

演示：http://jsfiddle.net/cTh57/

JavaScript - 窗口低于750px时添加类;

4 个答案: