jquery addClass를 계단식으로 사용하십시오.

Question

응답 성있는 목적으로 여러 클래스를 추가해야합니다. 나는 navbar-fixed-top을 추가하려고합니다. addxs을 포함하는 각 요소에 col-xs-4을 추가 한 후에도 동일한 반응이 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>