Javascript JS新手我如何重复im使用的代码量

我已经设法让这个工作，但我相信有一个更好的/更完善的方式来写这篇文章谁能指导我一些捷径

谢谢:

/*在打开过滤器/排序依据的类别中向下移动产品，并向下滑动过滤器或排序依据部分*/

var filterHeight = $('.product-filter').outerHeight() + 40;
var sortbyHeight = $('.sortby').outerHeight() + 20;
var speed = 1000

// hide by default instead of display:none in css as we need to find the height first
$('.product-filter').css('display', 'none');
$('.sortby').css('display', 'none');


// slide down filters/sort on click of 'refine' or 'sort' buttons
$('.clickable-header').click(function() {

    $(this).toggleClass('active');

    if ($(this).hasClass('active')) {

        if ($(this).hasClass('filter-header'))  {

            $('.clickable-header').removeClass('active');
            $(this).addClass('active');
            $('.sortby').slideUp(speed);
            $(this).parent().find('.dropable-section').slideDown(speed);
            $('#category-products').animate({ 'marginTop': filterHeight}, speed);
        }

        if ($(this).hasClass('sort-by-header'))  {

            $('.clickable-header').removeClass('active');
            $(this).addClass('active');
            $('.product-filter').slideUp(speed);
            $(this).parent().find('.dropable-section').slideDown(speed);
            $('#category-products').animate({ 'marginTop': sortbyHeight}, speed);
        }
    }

    else {

         if ($(this).hasClass('filter-header'))  {

            $(this).parent().find('.dropable-section').slideUp(speed);
            $('#category-products').animate({ 'marginTop': 0}, speed);
        }

        if ($(this).hasClass('sort-by-header'))  {

            $(this).parent().find('.dropable-section').slideUp(speed);
            $('#category-products').animate({ 'marginTop': 0}, speed);
        }

    }

});

---

重现、减少和重新编码；这更适合Ok谢谢我的第一篇帖子，因为我是一个新手。请注意，重复拨打$This会很贵。最好将其分配给一个var并重用它。