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

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()并让它为您完成所有工作。