Javascript 切换div以显示隐藏

我有一个简单的代码块来隐藏/显示两个div。它工作得很好，唯一的问题是我需要将显示值返回到#MSOZoneCell_WebPartWPQ2返回到表中。我最初在css中将其设置为“无”。最后一行似乎不起作用

代码如下：

$(function() {
$('#swap').click(function() {

    $('#MSOZoneCell_WebPartWPQ2').toggle();
    $('#example_wrapper').toggle();
    $('#MSOZoneCell_WebPartWPQ').css('display') == 'table';
});
});

---

您正在使用

==

运算符

试试这个：

$(document).ready(function(){
    $('#swap').click(function() {
        $('#MSOZoneCell_WebPartWPQ2').toggle();
        $('#example_wrapper').toggle();
        $('#MSOZoneCell_WebPartWPQ').attr('style','display:table;');
    });
});

---

您正在使用

==

运算符

试试这个：

$(document).ready(function(){
    $('#swap').click(function() {
        $('#MSOZoneCell_WebPartWPQ2').toggle();
        $('#example_wrapper').toggle();
        $('#MSOZoneCell_WebPartWPQ').attr('style','display:table;');
    });
});

---

您确定需要“==”来设置值吗？或者一个“=”

您确定需要“=”来设置值吗？或者一个“=”

首先

=

是相等检查。您应该使用

=

设置值

其次，

css（）

方法setter接受两个参数。要设置的规则和值本身。试试这个：

$('#MSOZoneCell_WebPartWPQ').css('display', 'table');

---

首先，

==

是一种平等性检查。您应该使用

=

设置值

其次，

css（）

方法setter接受两个参数。要设置的规则和值本身。试试这个：

$('#MSOZoneCell_WebPartWPQ').css('display', 'table');

你应该使用

为匹配的元素集设置一个或多个CSS属性

所以你的最后一行应该是

$('#MSOZoneCell_WebPartWPQ').css('display', 'table');

---

调用.css（propertyName）

$('#MSOZoneCell_WebPartWPQ').css('display);

您正在获取所述属性的值，而不是设置它

获取集合中第一个元素的计算样式特性 匹配元素

---

更新1： 请注意，Jquery的.show（）、.hide（）和.toggle（）只适用于具有块显示属性的元素

因此，避免来回更改display属性的一种方法是将所需的元素包装在div（容器）中，并使用.toggle（）将其保存

，我使用一个名为“toggle”的cals扭曲了容器div中的每个div，并使用style属性将其中一个div的初始显示值设置为“none”

<div class="toggle" style="display:none">

---

更新2： 您还可以使用.toggleClass（）

$('#MSOZoneCell_WebPartWPQ').css('display);

将此添加到CSS中

#example_wrapper.hiddenDiv, #MSOZoneCell_WebPartWPQ2.hiddenDiv {
  display: none;
}

向最初要隐藏的div添加一个类

<div id="MSOZoneCell_WebPartWPQ2" class="hiddenDiv">

在本例中，我使用了一个名为“hiddenDiv”的类，如果您更改它，请确保在CSS、HTML和JS中类名相同。

您应该使用

为匹配的元素集设置一个或多个CSS属性

所以你的最后一行应该是

$('#MSOZoneCell_WebPartWPQ').css('display', 'table');

---

调用.css（propertyName）

$('#MSOZoneCell_WebPartWPQ').css('display);

您正在获取所述属性的值，而不是设置它

获取集合中第一个元素的计算样式特性 匹配元素

---

更新1： 请注意，Jquery的.show（）、.hide（）和.toggle（）只适用于具有块显示属性的元素

因此，避免来回更改display属性的一种方法是将所需的元素包装在div（容器）中，并使用.toggle（）将其保存

，我使用一个名为“toggle”的cals扭曲了容器div中的每个div，并使用style属性将其中一个div的初始显示值设置为“none”

<div class="toggle" style="display:none">

---

更新2： 您还可以使用.toggleClass（）

$('#MSOZoneCell_WebPartWPQ').css('display);

将此添加到CSS中

#example_wrapper.hiddenDiv, #MSOZoneCell_WebPartWPQ2.hiddenDiv {
  display: none;
}

向最初要隐藏的div添加一个类

<div id="MSOZoneCell_WebPartWPQ2" class="hiddenDiv">

---

在本例中，我使用了一个名为“hiddenDiv”的类，如果您更改它，请确保CSS、HTML和JS中的类名相同。

No-CSS（）的setter接受两个参数。是的。错过了。非常感谢。没问题。最好删除这个，因为它完全不正确。我甚至不知道为什么它被选为最诚实的人。不——

css（）

的制定者有两个参数。是的。错过了。非常感谢。没问题。最好删除这个，因为它完全不正确。我甚至不知道为什么它会被选为最诚实的。不，css（）的设置程序有两个参数。是的，我一发布它就意识到了这一点。谢谢你提醒我，顺便说一句，布里尔-谢谢你。愚蠢的错误！令人恼火的是，在切换之后，它仍然默认显示：block..哦..好的。罗斯科特，我10点后有个会议。我可以在那之后再谈这个吗。让你等我感觉很糟糕，没问题！谢谢你花时间帮忙：）不-css（）的setter有两个参数是的，我一发布就意识到了这一点。谢谢你提醒我，顺便说一句，布里尔-谢谢你。愚蠢的错误！令人恼火的是，在切换之后，它仍然默认显示：block..哦..好的。罗斯科特，我10点后有个会议。我可以在那之后再谈这个吗。让你等我感觉很糟糕，没问题！我很感谢您花时间提供帮助：）在更改值时像$（elemnt）.css（“属性”、“新值”）一样使用，另一方面

=

分配值

=

和

==

比较值。在更改值时使用类似$（elemnt）.css（“属性”、“新值”），另一方面

=

分配值

=

和

==

比较值。谢谢。现在有道理了。不幸的是，尽管如此，该div的内联样式被设置为block而不是table！看不出哪里出了问题。更新了答案以避免更改显示属性，这会扰乱div的样式。谢谢。现在有道理了。不幸的是，尽管如此，该div的内联样式被设置为block而不是table！看不到哪里出错。更新了答案以避免更改显示属性，这可能会弄乱div的样式。