切换div以显示隐藏

Question

我有一个简单的代码块来隐藏/显示两个div。 效果很好，我唯一的问题是我需要将显示值返回＃MSOZoneCell_WebPartWPQ2回到表中。 我最初在CSS中将其设置为none。 最后一行似乎没有生效。

这是代码：

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

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

Answer 1

您正在使用==运算符

尝试这个：

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

Answer 2

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

Answer 3

首先==是相等检查。 您应该使用=设置值。

其次， css()方法设置器接受两个参数。 设置规则和值本身。 尝试这个：

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

Answer 4

您应该使用.css（propertyName，value）

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

所以你的最后一行应该是

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

---

当您调用.css（propertyName）

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

您正在获取所述属性的值而不进行设置

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

---

更新1：

请注意，jQuery的.show（）、. hide（）和.toggle（）仅适用于具有块显示属性的元素。

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

我创建了一个JSFiddle ，将容器div中的每个div都用称为“ toggle”的calss进行了变形，并使用样式属性将其中一个的初始显示值设置为“ none”。

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

现在我用这个在他们之间切换

$('.toggle').toggle();

---

更新2：

您还可以使用.toggleClass（） 这是另一个JSFiddle

将此添加到您的CSS

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

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

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

使用此切换课程

$(function() {
$('#swap').click(function() {
    $('#MSOZoneCell_WebPartWPQ2').toggleClass("hiddenDiv");
    $('#example_wrapper').toggleClass("hiddenDiv");
});
});

在此示例中，我使用的是一个名为“ hiddenDiv”的类，如果进行更改，请确保该类名称在CSS，HTML和JS中相同。