Javascript 带引导选项卡的MixItUp问题

我正在尝试将MixitUp与引导选项卡一起使用，现在我已经阅读了一些，但它并没有解决这个问题

也不能解决这个问题

我已经能够用最少的代码在codepen中重现这个问题。

问题是，在不同选项卡中应用过滤器时，它们会停止工作

复制：

在选项卡1中应用过滤器

在选项卡2中应用过滤器

再次尝试应用选项卡1中的筛选器

在第三步，过滤器不再工作

几天来我一直在努力解决这个问题，但我被卡住了。 下面是一些处理选项卡之间切换的代码：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr('href');
    if (target === "#TvShowTab") {
      if (!$('#tvList').mixItUp('isLoaded')) {
        $('#tvList').mixItUp();
      }
    }
    if (target === "#MoviesTab") {
      if (!$('#movieList').mixItUp('isLoaded')) {
            $('#movieList').mixItUp();
      }
    }
});

---

我已经能够通过确保在按下选项卡时调用mixItUp（“销毁”）来解决此问题

if (target === "#TvShowTab") {
  if ($('#movieList').mixItUp('isLoaded'))
  {       
    $('#movieList').mixItUp('destroy');  
  }      
  if (!$('#tvList').mixItUp('isLoaded')) {
    $('#tvList').mixItUp();        
  }
}

如果希望过滤器在选项卡之间保持不变，可以在运行destroy api之前使用mixItUp（'getState'）。下面是它的外观与添加

$(function() {
$('#movieList').mixItUp();


$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var target = $(e.target).attr('href');
    var activeState = ''
    if (target === "#TvShowTab") {
        if ($('#movieList').mixItUp('isLoaded')) {
            activeState = $('#movieList').mixItUp('getState');
            $('#movieList').mixItUp('destroy');
        }
        if (!$('#tvList').mixItUp('isLoaded')) {
            $('#tvList').mixItUp({
                load: {
                    filter: activeState.activeFilter || 'all',
                    sort: activeState.activeSort || 'default:asc'
                }
            });
        }
    }
    if (target === "#MoviesTab") {
        if ($('#tvList').mixItUp('isLoaded')) {
            activeState = $('#tvList').mixItUp('getState');
            $('#tvList').mixItUp('destroy');
        }
        if (!$('#movieList').mixItUp('isLoaded')) {
            $('#movieList').mixItUp({
                load: {
                    filter: activeState.activeFilter || 'all',
                    sort: activeState.activeSort || 'default:asc'
                }
            });
        }
    }
});
});

---

我认为这与隐藏的

选项卡窗格

将

显示

设置为

无

有关。我更改了底部的CSS:@makshh这很有效，但是为什么第二个选项卡的内容会被按下？有什么办法可以防止这种情况发生吗？@makshh的解决方案最终对我来说不再有效了。我可以通过确保在按下选项卡时调用mixItUp（“销毁”）来解决这个问题。更新了密码笔，但这是黑客。