MixitUp不与引导选项卡窗格工作

$(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最多不使用CSS标签工作如果我们删除该选项卡窗格中我会努力

请人找到这个问题的解决方案

请找到该代码这个评论，并删除选项卡窗格类则MixItUp将工作

tab-pane是Bootstrap的一个类。

来源

2016-01-23 Dfx

我以前遇到过同样的问题。在MixItUp中使用Bootstrap标签似乎存在一些问题。我不知道为什么，但我设法找到解决方案。

只需修改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 [数据切换= “标签”]'），是问在href你点击并告诉当show.bs.tab函数被调用时，其余的代码将被执行。

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

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

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

来源

2016-01-23 05:00:48

这对我有效。确保过滤器是“MIXIT”级集装箱

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

来源

2016-12-24 07:22:26

在这里你可以找到来自mixItUp版本3.1.0这个问题的解决方案内。您可以定义其他[数据属性]选择器，而不是[数据切换]。

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

来源

2017-01-20 11:08:27

MixitUp不与引导选项卡窗格工作

回答

相关问题