Question

目前我有一个Wordpress网站使用Isotope显示网格中的所有帖子，并且有一个固定的导航用于过滤帖子类别。

我正在尝试添加一些Javascript或Jquery，以便在单击导航项时滚动到页面顶部 - 因此它会过滤类别并滚动到页面顶部。

我一直在尝试不同的例子而无法弄明白。我希望有人能指出我正确的方向。

目前我的导航如下：

    <div class="menuContainer right">
       <ul id="options" class="option-set">
         <li><a href="#" data-filter=".1">Editorial</a></li>
         <li>&nbsp;</li>
         <li><a href="#" data-filter=".4">Covers</a></li>
         <li>&nbsp;</li>
         <li><a href="#" data-filter=".3">Advertising</a></li>
         <li>&nbsp;</li>
        <li><a href="#" data-filter=".5">Film</a></li>
       </ul>
   </div>`

和当前的js。

      <script type="text/javascript">
   jQuery(document).ready(function(){
     var mycontainer = jQuery('#isocontent');
     mycontainer.isotope({
     itemSelector: '.postContainer',
     });

   // filter items when filter link is clicked
jQuery('#options a').click(function(){
  var selector = jQuery(this).attr('data-filter');
  mycontainer.isotope({ filter: selector });
  return false;  
  });

// set selected menu items
   var $optionSets = $('.option-set'),
       $optionLinks = $optionSets.find('a');

       $optionLinks.click(function(){
          var $this = $(this);
      // don't proceed if already selected
      if ( $this.hasClass('selected') ) {
          return false;
      }
   var $optionSet = $this.parents('.option-set');
   $optionSet.find('.selected').removeClass('selected');
   $this.addClass('selected'); 

});

});
 </script>

非常感谢所有帮助。谢谢！

Answer 1

好的，眼见为实:)更容易理解你想要的东西。基本上，您所要做的就是在编辑，封面，广告，电影链接上勾选我之前评论过的内容。由于您使用Isotope进行过滤，因此您已经为链接分配了点击功能......

// stuff

<ul id="filters">
    <li><a href="#" data-filter="*">Show all, home, whatever</a></li>
    <li><a href="#" data-filter=".editorial">Editorial</a></li>
    <li><a href="#" data-filter=".covers">Covers</a></li>
    <li><a href="#" data-filter=".advertising">Advertising</a></li>
    <li><a href="#" data-filter=".film">Film</a></li>
</ul>

// more stuff

$('#filters a').click(function() {
    var selector = $(this).attr('data-filter');
    $container.isotope({
        filter: selector
    });
    $('body,html').animate({ // always scrolls to the top when filter link is clicked
        scrollTop: 0
    }, 800);
    return false;
});

// even more stuff

使用同位素数据过滤添加带有导航的滚动

1 个答案: