单击其他div时切换类中的单个元素 [英] Toggling a single element within a class when other div is clicked Jquery

问题描述

我正在尝试为wordpress构建设置一个简单的注释切换.

I'm trying to setup a simple comment toggle for a wordpress build.

CSS

<div class="commenttoggle">
    <p class="popcom">Show Comments</p>
                                     ~~~Clickable Button~~~~~~
</div>
<div id="comments" class="comments-area">
                                     ~~~~PHP code calling WP comments~~~
</div>

jQuery

    jQuery(document).ready(function($) {
       $('.comments-area').hide();

           $('.commenttoggle').click(function() {
             $('.comments-area').toggle();
           });
       });

上面的代码有效，但是当我单击一个帖子下的显示评论按钮时，将显示所有评论部分.我一直在寻找jQuery api&在stackoverflow上可以找到，但似乎找不到关于仅切换最接近click事件的元素的任何建议.

The above code works but when i click the show comments button under one post all the comments sections display. I've been looking over the jQuery api & here at stackoverflow but can't seem to find any advice about only toggling the element closest to the click event.

我尝试过.closest& .parent但我似乎无法使其工作.我真的很喜欢一些代码，但也很乐于解释，因为我只是从jQuery开始.

I've tried .closest & .parent but i can't seem to be able to make it work. I'd really appreciate some code but also an explanation as i'm just starting with jQuery.

推荐答案

这应该做您想做的事情:

This should do what you want :

jQuery(document).ready(function($) {
    $('.comments-area').hide();
    $('.commenttoggle p').click(function() {
        $(this).closest("div").next('.comments-area').toggle();
    });
});

这篇关于单击其他div时切换类中的单个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！