切换 div 以显示隐藏答案

【问题标题】：toggle div to show hide切换 div 以显示隐藏
【发布时间】：2016-12-20 15:26:45
【问题描述】：

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

代码如下：

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

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

【问题讨论】：

css 在更改值时像 $(elemnt).css("property","new value") 一样使用，另一方面 = 分配一个值 == 和 @ 987654325@比较值。

标签： javascript jquery toggle

【解决方案1】：

您正在使用== 运算符

试试这个：

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

【讨论】：

否 - css() 的 setter 有两个参数
是的，我一发布就意识到了。谢谢提醒，顺便说一句。
brill - 谢谢。愚蠢的错误！烦人的是，它仍然默认显示：切换后阻止..
哦..好的。 RScott，我 10 点有个会议。我能在那之后再谈这个吗？让你等我感觉很糟糕。
没问题！感谢您抽出宝贵时间提供帮助:)

【解决方案2】：

你应该使用.css( propertyName, value )

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

所以你的最后一行应该是

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

当你调用 .css(propertyName)

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

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

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

更新 1：

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

因此，避免来回更改显示属性的一种方法是将所需元素包装在 div（容器）中并 .toggle() 它。

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

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

现在我使用它在它们之间切换

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

更新 2：

你也可以使用 .toggleClass() here's another 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 中的类名相同。

【讨论】：

谢谢你。现在说得通了。不幸的是，尽管如此，该 div 的内联样式被设置为块而不是表格！看不出哪里出了问题。
更新了答案以避免更改显示属性，这可能会弄乱 div 的样式。

【解决方案3】：

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

【讨论】：

否 - css() 的设置器有两个参数。
是的。错过了。谢谢！
没问题。最好删除它，因为它完全不正确。我什至不确定为什么要诚实

【解决方案4】：

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

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

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

【讨论】：