本文介绍了MixitUp 不适用于 Bootstrap 选项卡窗格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

 $(function () {$('#container').mixItUp({布局: {显示:'块'},控制:{切换过滤器按钮:假,切换逻辑:'或'}});});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="样式表"/><script src="http://code.jquery.com/jquery-2.2.0.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><头><script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script><身体><ul class="nav nav-tabs"><li><a data-toggle="tab" href="#rest">菜单 1</a></li><li><a data-toggle="tab" href="#retail">菜单 2</a></li><div class="tab-content"><!-- 删除此选项卡窗格组合将起作用--><div id="rest" class="tab-pane淡入" ><br><ul class="nav nav-tabs">
  • <a href="#full" data-toggle="tab">全套服务</a>
  • <li><a href="#quick" data-toggle="tab">快速服务</a><li><a href="#餐饮" data-toggle="tab">餐饮</a><div class="tab-content"><div id="full" class="tab-pane active淡入"><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">餐饮</a></li><div id="容器"><div class="mix col-md-3 hotel">第 1 行</div><div class="mix col-md-3 hotel cafe">第 2 行</div><div class="mix col-md-3 咖啡厅餐厅">第 3 行</div><div class="mix col-md-3 餐饮酒店">第 4 行</div><div class="mix col-md-3 cafe">第 5 行</div>

    <div id="quick" class="tab-pane淡入">快捷服务

    <div id="餐饮" class="tab-pane淡入">餐饮

    <div id="retail" class="tab-pane淡入">第二个表

    </div></body></html>

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

    请有人找到解决此问题的方法

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

    tab-pane 是 Bootstrap 的一个类.

    解决方案

    在这里您可以找到 mixItUp 3.1.0 版中针对此问题的解决方案.您可以定义其他 [data-attribute] 选择器而不是 [data-toggle].

    mixitup(容器,{选择器:{控制:'[数据混合控制]'}}

    然后:

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

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

      $(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>

    Somebody Please help me to find this error--> MixIt Up is not working with Css TabsIf we remove the tab pane i will work

    Somebody please find a solution for this problem

    Please find This comment from the code and remove the tab-pane class then the MixItUp will work

    tab-pane is a class from Bootstrap.

    解决方案

    Here you can find a solution for this problem from mixItUp version 3.1.0.You can define other [data-attribute] selector instead [data-toggle].

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

    And then:

    <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

    这篇关于MixitUp 不适用于 Bootstrap 选项卡窗格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

    06-16 05:34