隐藏分组同位素元素标题

Question

使用同位素过滤，每个元素都在一个特定的组内。每个元素的组标题在过滤时堆叠在另一个之上，我不确定在标题未激活/未选中时隐藏标题的最佳方法。

每个元素都是.person，但标题也有.sub-head 类。有没有办法将.sub-head 附加到itemSelector？或者添加另一个 var 进行过滤？

我的js代码：

//***********DIRECTORY SCRIPTS***********
var $j = jQuery.noConflict();
$j('#directory').imagesLoaded( function() {

   var $container = $j('#directory');
   filters = {};

   $container.isotope({
        itemSelector: '.person',
        layoutMode : 'fitRows'
    });

    $j('.filter .button a').click(function(){
      var $this = $j(this);

      if ( $this.hasClass('selected') ) {
        return;
      }

      var $optionSet = $this.parents('.option-set');

      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

      var group = $optionSet.attr('data-filter-group');
      filters[ group ] = $this.attr('data-filter');

      var isoFilters = [];
      for ( var prop in filters ) {
        isoFilters.push( filters[ prop ] )
      }
      var selector = isoFilters.join('');
      $container.isotope({ filter: selector });

      return false;
    });
});

下面是一个屏幕截图，显示了如何选择“研究学院”并显示相应的元素。但是如何隐藏其他标题？

[注意：我将它与 php 和 WordPress 查询一起使用，但认为这是一个 js 问题。如果需要，我可以分享完整的源代码；不想在这里全部倾倒]

Answer 1

您已经在选择要从标题中删除类“.selected”的元素。

var $optionSet = $this.parents('.option-set');

      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

现在，只有当前标题有 '.selected' 类，所以你可以隐藏除具有此类的选项集之外的所有选项集

$optionSet.not('.selected').hide();