MixitUp 不适用于 Bootstrap 选项卡窗格答案

【问题标题】：MixitUp Not working with Bootstrap tab-paneMixitUp 不适用于 Bootstrap 选项卡窗格
【发布时间】：2016-01-23 04:02:06
【问题描述】：

  $(function () {
            $('#container').mixItUp({
                layout: {
                    display: 'block'
                },
                controls: {
                    toggleFilterButtons: false,
                    toggleLogic: 'or'
                }
            });
        });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <head>

<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
  </head>
<body>
<ul class="nav nav-tabs">

        <li><a data-toggle="tab" href="#rest"> Menu 1</a></li>
        <li><a data-toggle="tab" href="#retail">Menu 2</a></li>

    </ul>


    <div class="tab-content">
        <!-- REMOVE THIS TAB PANE MIXITUP will WOrk-->
        <div id="rest" class="tab-pane fade in" >
        <br>
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#full" data-toggle="tab">Full Service</a>
                </li>
                <li>
                    <a href="#quick" data-toggle="tab">Quick Service</a>
                </li>
                <li>
                    <a href="#catering" data-toggle="tab">Catering</a>
                </li>
            </ul>

            <div class="tab-content">
                <div id="full" class="tab-pane active fade in">
                    <ul class="filters btns">   

                        <li><a href="#" class="filter" data-filter=".hotel">Hotel</a></li>
                        <li><a href="#" class="filter" data-filter=".cafe">Cafeteria</a></li>
                        <li><a href="#" class="filter" data-filter=".dining">Dining</a></li>

                    </ul>

                    <div id="container">
                        <div class="mix col-md-3 hotel">Row 1</div>
                        <div class="mix col-md-3 hotel cafe">Row 2</div>
                        <div class="mix col-md-3 cafe dining">Row 3</div>
                        <div class="mix col-md-3 dining hotel">Row 4</div>
                        <div class="mix col-md-3 cafe">Row 5</div>

                    </div>
                </div>
                <div id="quick" class="tab-pane fade in">
                    Quick Service
                </div>
                <div id="catering" class="tab-pane fade in">
                    Catering
                </div>
            </div>
        </div>
        <div id="retail" class="tab-pane fade in">
            Second tabe
        </div>
    </div></body></html>

有人请帮我找出这个错误 --> MixIt Up 不适用于 Css 选项卡如果我们删除标签窗格，我会工作

请有人解决这个问题

请从代码中找到此注释并删除选项卡窗格类，然后 MixItUp 将起作用

tab-pane 是 Bootstrap 的一个类。

【问题讨论】：

标签： javascript twitter-bootstrap tabs mixitup

【解决方案1】：

不久前我遇到了同样的问题。将 Bootstrap 选项卡与 MixItUp 一起使用时似乎存在一些问题。我真的不知道为什么，但我设法找到了解决方案。

只需像这样修改你的 javascript...

$(document).ready(function() {
        $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
            $('#container').mixItUp({
                layout: {
                    display: 'block'
                },
                controls: {
                    toggleFilterButtons: false,
                    toggleLogic: 'or'
                }
            });
});
});

解释： $('a[data-toggle="tab"]'), 行询问您单击的 href 并告诉函数 show.bs.tab 何时被调用，而不是其余的的代码将被执行。

您可以进一步自定义 mixitup 并为不同的选项卡设置多个过滤器逻辑。为此，您可以使用目标属性。

var target = $(e.target).attr('href');
          if (target === '#full'){
/* filter loginc */  }

我在 MixItUp 论坛上找到了这个答案。更多信息，请点击here。

【讨论】：

【解决方案2】：

在这里，您可以从 mixItUp 3.1.0 版中找到解决此问题的方法。您可以定义其他 [data-attribute] 选择器来代替 [data-toggle]。

mixitup(container, {
 selectors: {
     control: '[data-mixitup-control]'
 }
}

然后：

<button type="button" data-mixitup-control data-filter=".red">Red</button>
<button type="button" data-mixitup-control data-toggle=".blue">Blue</button>
<button type="button" data-mixitup-control data-sort="default:desc">Sort Desc</button>

https://github.com/patrickkunka/mixitup/issues/268

【讨论】：

【解决方案3】：

这对我有用。确保过滤器位于“mixit”类容器中

var mixer = mixitup('.mixit', {
         controls: {
          scope: 'local'
         }
      });

【讨论】：