带有重复单击事件的WordPress博客index页不起作用

我是jQuery的新手, 正在使用以下内容来隐藏和显示WordPress主题中的内容。

这是一个博客索引页面, 因此有很多重复的类。我需要一种方法来单击一个博客文章图像, 并仅向其添加一个类, 以便仅显示其内容。设法做到了。然后, 我需要能够单击显示内容中的按钮以再次将其隐藏。

我试图单击以删除活动的类, 但是它没有用。我只能获得隐藏活动窗口的按钮, 并且只能隐藏一次。基本上, 它完全按照我想要的方式工作, 但是每个博客帖子仅一次, 然后什么也没有。

//clicking on a service circle makes it active and reveals its content
$('.service-circle').on('click', function(){
  $('.service-circle').removeClass('active');
  $(this).addClass('active');
});

//clicking on the close button hides content of active service circle
$('.close-button').on('click', function(){
    $('.service-circle.active .hidden-content').hide();
});

不知道模板设置是否有帮助, 但这也是：

    <div class="service-circle">
        <div class="hidden-content">
            <div class="close-button">X</div>
                <?php the_content(); ?>
        </div>
    </div>

这是CSS：

.service-circle {
width:100%;
-webkit-border-radius:50%; 
-moz-border-radius:50%; 
border-radius:50%;
float:left;
position:relative;
box-shadow:1px 1px 1px #ccc;
cursor:pointer !important;
}
.service-circle:after {
content:"";
display:block;
padding-bottom:100%;
}
.hidden-content {
display:block;
width:60%;
height:60%;
padding:0;
position:fixed;
z-index:9;
top:-100%;
left:-100%;
background:#f3f3f3;
box-shadow:1px 1px 2px 1px #999;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
}
.service-circle.active .hidden-content {
top:20%;
left:20%;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
}
.close-button {
width:50px;
height:50px;
background:#e86d1f;
-webkit-border-radius:50%; 
-moz-border-radius:50%; 
border-radius:50%;
position:absolute;
top:-25px;
right:-25px;
color:#fff;
font-weight:700;
line-height:50px;
font-size:25px;
cursor:pointer;
}

#1

你需要在函数中使用jQuery .each()来将代码应用于动态生成的每个帖子, 然后可以根据需要使用.addClass .removeClass或.toggleClass。你还需要添加.stopPropagation, 因为.close-button嵌套在.service-circle内, 因此.active被一个功能删除, 而又被另一个功能添加。我还使用.find()查找子元素.close-button, 类似地使用.find()查找祖父母.service-circle。希望所有这些都有意义。

$('.service-circle').each(function(){ 
    $(this).on('click' , function(e){
        e.stopPropagation();
        $(this).addClass('active');
    });
    $(this).find('.close-button').on('click' , function(e){
        e.stopPropagation();
        $(this).parents('.service-circle').removeClass('active');
    });
});

#2

$('.service-circle').on('click', function(){
  $(this).addClass('hide');
});

类”隐藏”将自动隐藏内容