将jQuery插件应用于隐藏元素

Question

我有一个页面，里面有许多隐藏的div。这些div使用CSS处理程序隐藏。div{show： no}。

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

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

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

我认为这是因为幻灯片的脚本使用了$（文档）。ready（）函数。由于隐藏的div不是DOM的一部分（因为它们被设置为display:none）-运行幻灯片放映所需的jQuery不会启动。

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

>

在使用jQuery加载页面时隐藏隐藏的div，而不是将CSS设置为display:none。我认为这意味着隐藏的div在页面加载时会在几秒钟内全部可见，然后用jQuery代码将它们隐藏起来——这看起来很笨拙，不可取。

不知何故，当用户单击照片以切换隐藏div的可见性时，将操作幻灯片放映所需的jQuery代码设置为触发。这就是我崩溃的地方——我不知道怎么做。

我对JavaScript的了解仅限于jQuery，并且通常仅限于使用具有$（文档）.就绪（）的函数。除了页面加载之外，我不知道如何在另一个事件上触发代码。

幻灯片的代码如下所示。

任何想法都将不胜感激

$(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标注，并且由于元素未显示，因此需要0。

jquery的。宽度（）或。对于显示为“无”的元素，height（）将返回0

如果是这样，那么可能的解决方案是：

1） 仅在“隐藏”div第一次可见后初始化gallery

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

第二个示例：

$('.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'})
          }
       });