Question

我需要为响应目的添加多个类。我想添加navbar-fixed-top，然后将col-xs-4添加到包含addxs的每个元素，同样的反应也适用于removeClass。

我在下面尝试过代码，但根本没有运气。

<div class="middle">
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-3 addxs logo">
                    <div class="navbar-header">
                        <a href="#" class="navbar-brand">
                            logo
                        </a>
                        <button type="button" class="navbar-toggle collapsed toggle-red toggle-me" data-toggle="collapse" data-target="#bs-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                </div>

                <div class="col-md-6 col-sm-6 addxs">
                    something
                </div>

                <div class="col-md-3 col-sm-3 addxs">
                    something
                </div>
            </div><!-- /.row -->
        </div><!-- /.container -->
    </nav>
</div><!-- /.middle -->

Jquery的：

$(function(){
    if($(window).width() <= 480){

        $(window).scroll(function() {
            if($(this).scrollTop() > 240) {
                $('.middle nav.navbar-default').addClass('navbar-fixed-top').parent().next().find('.addxs').addClass('col-xs-4');
            }else{
            $('.middle nav.navbar-default').removeClass('navbar-fixed-top').parent().next().find('.addxs').removeClass('col-xs-4');
        }
        });
    }
});

Answer 1

试试这个：

<script type="text/javascript">
   $(function(){
    if($(window).width() <= 480){

        $(window).scroll(function() {
            if($(this).scrollTop() > 240) {
                $('.middle nav.navbar-default').addClass('navbar-fixed-top');
                $('.middle nav.navbar-default').find('.addxs').addClass('col-xs-4');
            }else{
                $('.middle nav.navbar-default').removeClass('navbar-fixed-top');
                $('.middle nav.navbar-default').find('.addxs').removeClass('col-xs-4');
        }
        });
    }
});
</script>

Jquery addClass以级联方式

1 个答案: