javascript - 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>

谢谢，贾斯汀.

Answer 1

您应该替换用于 click 事件的选择器的 this 引用。

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');
        }

};

});