Mixitup过滤器消失并添加"失败"类

时间:2015-10-19 11:43:10

标签: javascript jquery html css mixitup

在我的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>

我需要你的帮助

1 个答案:

答案 0 :(得分:1)

可能有点迟到给你一个答案,但我遇到了类似的问题,作为其中的一部分我也成功地对你进行了排序。

简而言之,您的问题是您应用了“过滤器”。 <ul>上的课程以及<li>代码。从您提供的CodePen中的<ul>中删除课程可以解决问题 - 尽管会弄乱您的布局。

希望这有帮助。