MixitUp Not working with Bootstrap tab-pane

问题

  $(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 Tabs If 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.

回答1:

I encountered the same problem a while back. There seems to be some issue while using Bootstrap tabs with MixItUp. I don' really know why but i managed to find a solution.

Just modify your javascript like this...

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

Explanation: the line $(‘a[data-toggle="tab"]‘), is asking about the href that you click and tells that when the function show.bs.tab is called, than the rest of the code will get executed.

You can further customize mixitup and have multiple filter logic for different tab. For that, You can use target attribute.

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

I found this answer on MixItUp Forum. For more info, click here.

回答2:

This worked for me. Make sure the the filters are inside the 'mixit' class container

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

回答3:

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

来源：https://stackoverflow.com/questions/34959469/mixitup-not-working-with-bootstrap-tab-pane

标签

javascript

twitter-bootstrap

tabs

mixitup