在我的mixitup中,我正在做一个基本的过滤器,但是当我点击其中一个过滤器按钮时,过滤后的项目会在一秒后消失。我可以在firebug中看到,它将“失败”类添加到这些项目的容器中。但是我看不出那是什么错误。
在codepen中:http://codepen.io/anon/pen/PPOgwr
以下是我的过滤器按钮HTML:
$(ConfigurationName)
这是容器:
<div class="row row-centered filter-section">
<div class="col-md-7 col-centered">
<ul class="filter">
<li><a href="#" data-filter="all">Hepsi</a></li>
<li><a href="#">/</a></li>
<li><a href="#" class="filter" data-filter=".basili">Basılı İş</a></li>
<li><a href="#">/</a></li>
<li><a href="#" class="filter" data-filter=".kurumsal">Kurumsal Kimlik</a></li>
<li><a href="#">/</a></li>
<li><a href="#" class="filter" data-filter=".ilan">İlan</a></li>
<li><a href="#">/</a></li>
<li><a href="#" class="filter" data-filter=".ambalaj">Ambalaj</a></li>
<li><a href="#">/</a></li>
<li><a href="#" class="filter" data-filter=".stand">Stand</a></li>
<li><a href="#">/</a></li>
<li><a href="#" class="filter" data-filter=".film">Film</a></li>
</ul>
</div>
</div>
JS代码:
<div class="row grid" id="grid">
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver1">
<img class="img-responsive" src="isler/silver/silver1.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver2">
<img class="img-responsive" src="isler/silver/silver3.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix ilan">
<div class="position-relative">
<a href="" id="silver3">
<img class="img-responsive" src="isler/silver/silver4.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
</div>
我需要你的帮助
答案 0 :(得分:1)
可能有点迟到给你一个答案,但我遇到了类似的问题,作为其中的一部分我也成功地对你进行了排序。
简而言之,您的问题是您应用了“过滤器”。 <ul>
上的课程以及<li>
代码。从您提供的CodePen中的<ul>
中删除课程可以解决问题 - 尽管会弄乱您的布局。
希望这有帮助。