Question

我正在学习HTML5 / CSS，虽然我的同位素过滤几乎完美，但还有一个小错误。

默认情况下设置“全部”，当我点击任何其他选项时，正确过滤它们时，动画不会触发。在那之后，一切都动画很好，这只是问题的第一次点击。

非常感谢任何帮助或想法。

以下是相关的HTML和css：

  <div class="container-fluid filterable-portfolio">
        <div class="row">
           <div class="col-md-12">
              <ul class="nav nav-pills portfolio filter">
                 <li class="portfolio-title">Filter by:</li>
                 <li role="presentation" class="active"><a href="#" data-filter="*">All</a></li>
                 <li role="presentation"><a href="#"data-filter=".school">School Projects</a></li>
                 <li role="presentation"><a href="#"data-filter=".personal">Personal Projects</a></li>
                 <li role="presentation"><a href="#"data-filter=".unity">Unity Projects</a></li>
              </ul>
           </div>
        </div>
        <div class="row portfolio-items">
           <figure class="portfolio-item col-sm-4 school">
              <a href="#">
              <img src="http://placekitten.com/700/400" class="img-responsive">
              </a> /* this bit of code has several more instances, but i cut them to save space for asking this question */

这是css：

.portfolio-title {
padding: 10px 15px 10px 0;
font-weight: bold;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
background: none;
color: #000000;
}

.nav-pills > li.active > a{
color: #000000 !important;
background-color:#f5f5f5 !important;
}

.nav-pills a{
color: #000000;
margin-bottom: 1rem;
}

.nav>li>a:hover, .nav>li>a:focus {
background: none;
color: #000000;
}

.portfolio-item {
margin-bottom: 1rem;
}

.portfolio-item img {
-webkit-filter:grayscale(100%);
filter:grayscale(100%);
border-radius:6px;
}

.portfolio-item:hover img {
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}

.filterable-portfolio{
margin-bottom: 3rem;
}
.portfolio-item img{    
width :100%;    
}

这是js：

// init Isotope
var $container = $('.portfolio-items').isotope('layout');

// filter items on button click
$('.portfolio.filter').on( 'click', 'a', function(e) {
e.preventDefault();
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });

//$('.portfolio-filter li').removeClass('active');
//$(this).closest('li').addClass('active');
});

Answer 1

此代码对我来说很好。

var $portfolio_filter = $('.portfolio-items').isotope();    
$grid_selectors = $('.portfolio.filter > li > a');
$grid_selectors.on('click', function () {
    $grid_selectors.parent().removeClass('active');
    $(this).parent().addClass('active');
    var selector = $(this).attr('data-filter');
    $portfolio_filter.isotope({filter: selector}).isotope( 'reloadItems' ).isotope();
    return false;
});

同位素过滤器动画无法首次点击

1 个答案: