Question

我想显示并隐藏一个div，如下所示：

$('#Div1').click(function () {
            if ($("#Div2").hidden) {
                $("#Div2").show(500);
            }
            else {
                $("#Div2").hide(1000);
            }

        });

此代码不起作用。

我希望通过点击页面的空白来隐藏div2我该怎么做？我的代码在哪里错了？

Answer 1

hidden不是jQuery对象的属性。试试is(':hidden')

  $('#Div1').click(function () {
        if ($("#Div2").is(':hidden')) {
            $("#Div2").show(500);
        }
        else {
            $("#Div2").hide(1000);
        }

  });

如果时间相同，您只需使用基于当前可见性的toggle()或hide show。

  $('#Div1').click(function () {
       $("#Div2").stop().toggle(500);
  });

和@A一样。 Wolff建议，为了允许多次点击，还可以使用stop来暂停正在进行的任何现有动画：

  $('#Div1').click(function () {
        if ($("#Div2").stop().is(':hidden')) {
            $("#Div2").show(500);
        }
        else {
            $("#Div2").hide(1000);
        }
  });

第2部分：

要在点击页面上的任何其他位置时隐藏div，请聆听点击document：

e.g。

 $(document).click(function(){
     $("#Div2").stop().hide(1000);
 });

为了使其正常工作，你不能允许点击div1传播到文档，所以更改第一部分也在第一个事件参数上使用stopPropagation()：

  $('#Div1').click(function (e) {
        e.stopPropagation();       // stop click propagating to document click handler
        if ($("#Div2").is(':hidden')) {
            $("#Div2").show(500);
        }
        else {
            $("#Div2").hide(1000);
        }
  });

如何使用jquery检查是否隐藏了一个元素

1 个答案: