Question

我正在编写一个脚本，该脚本将与我已经存在的网站一起使用。基本上，当您点击Show/Hide button时，它会在内容div上显示叠加层。然后可以选择隐藏整个div，包括叠加层，内容和容器。

问题是，你必须点击两次hide链接才能隐藏所有div。

我在这里有一个有效的例子：

http://jsfiddle.net/charlescarver/8c3VZ/3/

编辑：我用正确版本的JS更新了jsFiddle。我之前有不完整的那个。

此外，还有更多允许使用Cookie的脚本，我只是没有将其包含在内以减少代码量。

Answer 1

这是因为style.display属性最初是未定义的。扭转逻辑可以解决这个问题。基本上是因为element.style.display直接读取元素的style属性而不是像这个元素中的javascript属性：

<div style="display:none;">blah</div>

因为您的元素最初没有style属性，所以默认为else。切换逻辑将默认它隐藏它而不是显示它。

http://jsfiddle.net/MpJDN/

function toggle_visibility(a) {
var b = document.getElementById(a);
if (b.style.display == "none") {
    b.style.display = "block";
}
else {
    b.style.display = "none";
}
}

Answer 2

将您的toggle_visibility()代码更改为此代码，让jQuery的.toggle()和.css()为您完成大部分工作：

<script>
    function toggle_visibility(a) {
        var item = $("#" + a);
        item.toggle();
        $.cookie("disp" + a, item.css("display"));
    }
</script>

它无效的原因是原始代码中的b.style.display仅返回内联样式。它不返回CSS规则设置的样式。如果您真的想要获得该样式，可以使用jQuery的.css("display")方法。但是，在这种情况下，您可以使用.toggle()并让它为您完成所有工作。

为什么这个JS链接需要2次点击才能触发？

2 个答案: