JQuery - рухнуть панель на основе документа, ширина

Question

Я хотел бы, чтобы уменьшить панель, если ширина документа < 514. Сценарий я, что не работает это:

jQuery(document).ready(function($){ 

    if ($(document).width() < 514) { 

      if (!$('.panel-heading').hasClass('panel-collapsed')) { 
      // collapse the panel 
       $(this).parents('.panel').find('.panel-body').slideUp(); 
       $(this).addClass('panel-collapsed'); 
       $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down'); 
      } 

    }; 
}); 

и сценарий, который работает и позволяет пользователю вручную свернуть/развернуть панель:

jQuery(function ($) { 
    $('.panel-heading span.clickable').on("click", function (e) { 
     if ($(this).hasClass('panel-collapsed')) { 
      // expand the panel 
      $(this).parents('.panel').find('.panel-body').slideDown(); 
      $(this).removeClass('panel-collapsed'); 
      $(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up'); 
     } 
     else { 
      // collapse the panel 
      $(this).parents('.panel').find('.panel-body').slideUp(); 
      $(this).addClass('panel-collapsed'); 
      $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down'); 
     } 
    }); 
}); 

и HTML:

<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <h3 class="panel-title">Panel 1</h3> 
    <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span> 
    </div> 

<div class="panel-body"> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. 
</div> 

</div> 
</div> 

Спасибо, Justin.

Answer 1

Вы должны заменить ссылку this для селектора, который вы используете для события click.

jQuery(document).ready(function($){ 

if ($(document).width() < 514) { 
     var tar = $('.panel-heading span.clickable'); 
     if (!$('.panel-heading').hasClass('panel-collapsed')) { 
     // collapse the panel 
      tar.parents('.panel').find('.panel-body').slideUp(); 
      tar.addClass('panel-collapsed'); 
      tar.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down'); 
     } 

}; 

});