Javascript 为多个不同项目切换带模的显示/隐藏div

我有一个很长的项目/帖子列表，很像Facebook。每个项目/帖子都有自己的一组可切换的按钮

var commentToggle = 0;

$(".comment-icon").click(function(){

    commentToggle++;

    if (commentToggle % 2 === 0) {
      $(this).closest(".item").find(".comments").fadeOut(); // close comment box
      return; 
    }

    $(this).closest(".item").find(".comments").fadeIn(); // show comment box
    $(this).find("path").attr("fill","#3684FF");
    $(this).parents().siblings(".number-of").css("color","#3684FF");

});

然而，我有一个问题，如果你点击一篇文章上的评论图标，然后向下滚动到另一篇文章并点击该文章的评论图标，因为数字现在是偶数，除非你再次点击，否则它不会打开它

有什么办法解决这个问题吗

---

编辑：首先，所有帖子的评论部分都是隐藏的。

试着按照以下方式操作：

已更新

$(function(){

  $(".comment-icon").click(function(){

    $(this).closest(".item").find(".ripple").show();


    if ($('.comments').is(":visible")) {
      $(this).closest(".item").find(".comments").fadeOut();
      $(".ripple").fadeOut();
      return;
    } else {
         $(this).closest(".item").find(".comments").fadeIn();
        $(this).find("path").attr("fill","#3684FF");
        $(this).parents().siblings(".number-of").css("color","#3684FF");
    }



  });
});

然后，每次用户想要单击按钮时，它都会重置，只有在执行if语句之后

编辑

---

我这样做是为了检查元素是否可见，这基本上就是fadeIn（）和fadeOut（）控制的，告诉我它是如何运行的

第一次点击就关闭了吗？请你发一把小提琴好吗。请允许我理解，您有一个图标，单击时，它会打开，然后关闭，但是如果您想打开两个评论部分而不关闭前一个，则除非您单击图标两次，否则它不会打开？当您尝试在第一次点击图标时，由于之前的

commentToggle++

，您的只需关闭它，因为

commentToggle===1

。因此，它会在第一次单击时运行

if block

，而不会打开它。请你做一把小提琴，这样我就可以玩代码了，这样会容易得多。另外，评论部分一开始是关闭的，对吗？我可以试着做一把小提琴，但这可能需要一段时间。是的，对不起，一开始它是隐藏的（忘了提那个）。单击注释图标将其打开，然后再次单击以重新关闭。