Jquery 级联添加类

Question

我需要添加多个 class 用于响应目的。我想添加 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 级联添加类

Jquery addClass in cascade way

jquery

addclass

removeclass