引导选项卡的 MixItUp 问题答案

【问题标题】：MixItUp issue with Bootstrap Tabs引导选项卡的 MixItUp 问题
【发布时间】：2023-04-01 17:20:01
【问题描述】：

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

This 也没有解决问题

我已经能够用最少的代码在 codepen 中重现该问题。 http://codepen.io/anon/pen/aNWwZL

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

复制：

在选项卡 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();
      }
    }
});

【问题讨论】：

我认为这与隐藏的.tab-pane 将display 设置为none 的事实有关。我在底部更改了 CSS：codepen.io/makshh/pen/BKRdYZ
@makshh 这行得通，但是为什么第二个选项卡中的内容会被下推？有没有办法防止这种情况发生？
@makshh 的解决方案最终停止为我工作。我能够通过确保在按下选项卡时调用 mixItUp('destroy') 来解决这个问题。 codepen.io/shiitake/pen/oxWeaj
更新了 Codepen，但这是 hacky。

标签： javascript jquery twitter-bootstrap mixitup

【解决方案1】：

我已经能够通过确保在按下选项卡时调用 mixItUp('destroy') 来解决此问题。

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

【讨论】：