Question

我遇到一个问题，当页面加载时，div元素会被隐藏。 Chrome中的开发者工具告诉我“element.style”正在设置“display：none”

在任何地方都没有显示任何内容。我找不到任何隐藏元素的相关javascript文件。

我完全迷失了它隐藏的原因。

我正在使用的jquery插件称为Supersized。

编辑：请随时查看我正在处理的页面：http://www.gingereventsmpls.com/gallery2.html

如果您检查html，隐藏的元素位于此层次结尾：body-＆gt; div“controls-wrapper” - ＆gt; div“controls” - ＆gt; div“tray-button”

“＃tray-button”正在显示：没有以某种方式附加到它。

Answer 1

如果您想了解问题的根本原因，可以使用以下几行（在supersized3.shutter.js中找到）：

        $(vars.tray_button).toggle(function(){
            $(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
            if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
            return false;
        }, function() {
            $(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
            if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
            return false;
        });

它试图使用event-based toggle，但不幸的是，从JQuery 1.8开始，该版本的toggle函数已被弃用，并在1.9中被删除（您使用的是1.9）。那么实际发生的是THIS toggle函数被调用，它只是切换div是否被隐藏或显示。

您可以选择降级到JQuery 1.8或更低版本，或者重写依赖于旧的基于事件的切换功能的插件部分。

希望这有帮助！

编辑：我已在以下代码中重写了插件的上述部分以与1.9兼容，请告诉我这是否有效，我还没有测试过：

$(vars.tray_button).on('click',function(){
    var self=$(this)
    self.data('toggle',!self.data('toggle'))
    if(self.data('toggle')) {
        $(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
        if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
    } else {
        $(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
        if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
    }
    return false;
});

Answer 2

或者像这样的jquery：

    $('#tray-button').removeAttr('style');

如何找到隐藏元素的内容？

2 个答案: