MixitUp Not working with Bootstrap tab-pane

2019-09-12 01:23发布

站内问答 / JavaScript
1261 3 6 

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

3条回答
手持菜刀，她持情操
2楼-- · 2019-09-12 02:09

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.

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
3楼-- · 2019-09-12 02:21

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

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
4楼-- · 2019-09-12 02:22

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

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)