带有重复单击事件的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'); }); });