在单击其他div时切换单个元素Jquery

Question

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

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，但似乎无法找到任何关于只切换最接近单击事件的元素的任何建议。

我试过了.closest & .parent，但我似乎无法使其工作。我真的很感激一些代码，但也是一个解释，因为我只是从jQuery开始。

Answer 1

这应该做的你想要什么：

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

Answer 2

你需要元素迭代使用each同一类popcom和应用$(this)瞄准点击的元素

$('.popcom').each(function() { 
    $(this).click(function() { 
     // Your script here    
    }); 
}) 

注：.popcom是班级的节目评论按钮