Question

我对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;
}

Answer 1

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

“隐藏”类会自动隐藏内容

Answer 2

您需要在函数中使用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');
    });
});

WordPress博客索引页面，重复点击事件无效

2 个答案: