Question

我有一个包含评论的隐藏容器，里面有一个<div> <p>，上面写着＆＃34;显示所有评论＆＃34;我点击显示评论。当我单击div时，它会完美地显示隐藏的评论容器，但是当我再次单击它时，它不会隐藏评论容器。我想我的jQuery代码可能有问题吗？

var commentsHidden = $( ".comments-container" ).is( ":hidden" );

if (commentsHidden) {
  $( ".see-all" ).click(function() {
      $('.comments-container').show('slow');
      $('.see_hide').text('Hide Comments');
    });

} else {

    $( ".see-all" ).click(function() {
      $('.comments-container').hide();
    });

};

Answer 1

初始化commentsHidden时，它永远不会更新，因此它始终具有初始值。您需要检查每次点击是否隐藏它。因此，您不需要if语句来附加事件。只需附加一个单击事件并在事件内部检查它是否隐藏并相应地继续。

$(".see-all").click(function() {
    var commentsHidden = $(".comments-container").is(":hidden");
    if (commentsHidden) {
        $('.comments-container').show('slow');
        $('.see_hide').text('Hide Comments');
    } else {
        $('.comments-container').hide();
    }
});

Answer 2

当您致电on('click', ..)或其快捷方式click(..)时，您需要安装新的处理程序。最终发生的事情是，您在同一个对象上有多个处理程序，并且它们 all 被调用。相反，要么只安装一次处理程序：

// In global code or code that gets executed upon module load
// Only once!
$(".see-all").click(function() {
  if ($( ".comments-container" ).is( ":hidden" )) {
    $('.comments-container').show('slow');
    $('.see_hide').text('Hide Comments');
  } else {
    $('.comments-container').hide();
  }
});

或unbind旧处理程序：

$( ".see-all" ).off('click'); // Unbind all click handlers

var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
  $( ".see-all" ).click(function() {
    $('.comments-container').show('slow');
    $('.see_hide').text('Hide Comments');
  });
} else {
  $( ".see-all" ).click(function() {
    $('.comments-container').hide();
  });
};

Answer 3

您需要检查click函数（）中的标志状态。现在你拥有它的方式只会在页面加载时绑定点击处理程序。

$( ".see-all" ).click(function() {
    var commentsHidden = $( ".comments-container" ).is( ":hidden" );
    if (commentsHidden) {
        $('.comments-container').show('slow');
        $('.see_hide').text('Hide Comments');
    } else {
         $('.comments-container').hide();
    }
});

Answer 4

尝试更改为

$( ".see-all" ).click(function() {
  var commentsHidden = $( ".comments-container" ).is( ":hidden" );
  if (commentsHidden) {
      $('.comments-container').show('slow');
      $('.see_hide').text('Hide Comments');
    });
  } else {
    $( ".see-all" ).click(function() {
      $('.comments-container').hide();
    });
  }
});

点击处理程序应该只绑定一次，并且每次单击p元素时都需要检查注释是否隐藏。

当我点击它时，为什么隐藏的容器不再出现？

4 个答案: