0

我想在我的索引页面中使用 Mixitup for Portfolio。在索引页面中，我有一个“导航导航标签”和 Mixitup 项目。当我单击导航选项卡时，混合项目隐藏。比如冲突。
我该如何解决？

$(document).ready(function(){
var iast_MainGallery = document.querySelector('#iast-GalleryMainMix');
var mixer = mixitup(iast_MainGallery, {



    animation: {
        effects: 'fade scale stagger(50ms)' // Set a 'stagger' effect for the loading animation
    },
    load: {
        filter: 'none' // Ensure all targets start from hidden (i.e. display: none;)
    }
});

iast_MainGallery.classList.add('mixitup-ready');
mixer.show()
    .then(function() {
        // Remove the stagger effect for any subsequent operations

        mixer.configure({
            animation: {
                effects: 'fade scale'
            }
        });
    });

  });
 <div class="iast-GalleryBtnMixIt">
                        <button class="filter iast-GalleryBtnActive " data-filter="all">all</button>
                        <button class="filter" data-filter=".category-1">cat1</button>
                        <button class="filter" data-filter=".category-2">cat2</button>
                        <button class="filter" data-filter=".category-3">cat3</button>
                        <button class="filter" data-filter=".category-4">cat4</button>
                        <button class="filter" data-filter=".category-5">cat5</button>
                    </div>

                    <div id="iast-GalleryMainMix" class="container">

                        <!-- 1 -->
                        <div class="mix iast-MainGalleryMixItems category-1" data-myorder="1" style="display: inline-block;">
                            <div class="iast-GalleryItemUniName">
                                <a href="#">
                                    item1
                                </a>
                            </div>
                            <a href="#">
                                <img class="img-responsive" src="assets/demo/img/gallery-thumb.jpg" width="150" height="150">
                            </a>
                            <div class="iast-GalleryItemDesc">
text
                            </div>
                        </div>
</div>

4

1 回答 1

1

js：

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>

解决方案链接

于 2017-01-17T04:57:16.490 回答