Question

我有一个页面，里面有许多隐藏的div。使用CSS处理程序.div {display: none}隐藏这些div。

在每个隐藏的div中都有一个jQuery驱动的幻灯片，使用名为TN3的jQuery插件构建。

每个隐藏的div都链接到页面上可见的照片。单击照片会显示相应的隐藏div并将其滑动到位。再次单击照片，或隐藏div中的关闭按钮，将其向上滑动并再次隐藏。这是使用简单的jQuery show / hide切换脚本完成的。

我的问题是当你点击一张照片并且'隐藏'的div变得可见时，现在可见div中的jQuery幻灯片显示不起作用。

我认为这是因为幻灯片演示的脚本使用了$(document).ready()功能。由于隐藏的div不是DOM的一部分（因为它们设置为display:none） - 运行幻灯片所需的jQuery不会触发。

我认为这给我留下了两个选择：

使用jQuery隐藏页面加载时隐藏的div，而不是将CSS设置为display: none。我认为这意味着隐藏的div在页面加载时只会显示一小部分，然后它们会被jQuery代码隐藏起来 - 这看起来很笨重而且不可取。
以某种方式设置操作幻灯片显示所需的jQuery代码，以便在用户单击照片时切换隐藏div的可见性。这就是我失败的地方 - 我不知道该怎么做。

我对JavaScript的了解仅限于jQuery，通常仅限于使用$(document).ready()的函数。我不知道如何在除页面加载之外的其他事件上触发代码。

幻灯片的代码如下。

非常感谢任何想法

$(document).ready(function () {
    $('.tn3-gallery').tn3({
        image: {
            transitions: [{
                type: "fade",
                easing: "easeInQuad",
                duration: 423
            }]
        },
        thumbnailer: {
            overMove: false
        },
        mouseWheel: false
    });
}); // end ready

Answer 1

DOM中存在带有display：none的元素，但是当你为它们应用gallery插件时，它可能会计算要用于gallery dimantions的那些元素的高度/宽度，并且因为元素没有显示，所以它需要0。 / p>

jquery的.width（）或.height（）将为带有display：none

的元素返回0

如果是这种情况，则可能的解决方案是：

1）仅在'隐藏'div第一次可见

之后才初始化图库

2）暂时设置元素显示：块，但具有visiblility：在图库初始化之前隐藏 - 这将允许获取元素的正确高度/宽度

第二个例子：

$('.tn3-gallery')
       .css({'display':'block','visibility':'hidden'})
       .tn3({
           //your tn3 options
          init:function(){
           //turn element back to display:none after gallery is built
            $('.tn3-gallery').css({'display':'none','visibility':'visible'})
          }
       });

将jQuery插件应用于隐藏元素

1 个答案: