javascript - WordPress:关闭帖子显示，直到单击过滤按钮

Question

(这是我之前在学习如何使用 Wordpress 的过程中提出的一系列问题的延伸)

我正在使用一个小的 JavaScript 来打开和关闭页面上帖子的显示，具体取决于帖子各自的类别。该脚本启用页面顶部的一组过滤器按钮，以在显示属于特定类别的帖子之间进行切换。

现在我想更改页面的代码，以便在第一次加载页面时(即在单击任何过滤器按钮之前)根本不显示任何内容/帖子。现在，当访问该页面时，将显示属于子类别的父类别(按钮允许过滤)的所有帖子。

我必须如何更改网站才能执行此操作？

可以在此处访问该网站的在线版本:http://udkdev.skopec.de/category/studierende/

这是网站的代码以及底部过滤按钮的 javascript:

<?php get_header(); ?>
</div>
<br>
<div class="wrapper-offset-fix wrapper-studierende">
<div class="projekte content">

    <div class="button-group filters-button-group">
        <button class="projekt-btn btn" id="category-stud-sose17">SoSe 2017</button>
        <button class="projekt-btn btn" id="category-stud-wise1617">WiSe 2016/17</button>
        <button class="projekt-btn btn" id="category-wise-201415">SoSe 2016 </button>
        <button class="projekt-btn btn" id="category-sose-14">WiSe 2015/16</button>
        <button class="projekt-btn btn" id="category-sose-14">SoSe 2015 </button>
        <button class="projekt-btn btn" id="category-sose-14">WiSe 2014/15</button>    
    </div>

    <?php if (have_posts()): ?>
        <?php while(have_posts()): the_post(); ?>

        <div <?php post_class(); ?>>

    <?php 
                if ( has_post_thumbnail() ) {
                the_post_thumbnail('full');
            } ?> 

    <?php the_content(); ?>

            </a>
        <!--<div class="meta">Tags: <?php the_tags( '', ', ', '<br />' ); ?> </div>-->
        </div>
        <?php endwhile; ?>
    <?php else : ?>
        <h2>Couldn’t find any articles!</h2>
    <?php endif; ?>
</div>

<script>
    var $btns = $('.btn').click(function() {

      if (this.id == 'all') {
        $('.projekte > .post').fadeIn(300);
      } else {
        var $el = $('.' + this.id).fadeIn(300);
        $('.projekte > .post').not($el).fadeOut(300);
      }
      $btns.removeClass('active');
      $(this).addClass('active');
    })
</script> 

<?php get_footer(); ?>

Answer 1

您可以先隐藏所有帖子来开始此操作。 一种方法做到这一点是添加 CSS 样式

.projekte .post {display:none;}

看看你的代码，休息应该可以自行解决。不过，我会交换这些行，以便在添加新帖子之前删除帖子，如下所示:

$('.projekte > .post').not($el).fadeOut(300);
var $el = $('.' + this.id).fadeIn(300);