javascript - 如何隐藏照片直到菜单展开？

Question

我正在创建一个照片库，其中包含包含不同类别的不同下拉菜单。一切都很好，除了当我测试图库页面时，所有图像在加载时都是可见的，然后一旦它们完全加载，它们就会消失在它们所说的类别中(正如它应该开始的那样)。我的问题是这样的...

有没有办法隐藏所有照片，直到有人单击并展开菜单选项？或者也许有更好的方法来共同完成这一切？

这是画廊网站的链接... http://wayhigh.we.bs/Fireball%20Site/gallery.html这是 html 的示例...

<div class="wrapper">
    <div id="st-accordion" class="st-accordion">
        <ul>
            <li>
                <a href="#">Functional<span class="st-arrow">Open or Close</span>        </a>
                <div class="st-content">
                    <a class="fancybox-thumb" rel="functional" href="images/wyzeguy.jpg" title="Wyze guy rigs">
                        <img src="images/smallwyzeguy.jpg" alt="" />
                    </a>
                    <a class="fancybox-thumb" rel="functional" href="images/dragon.jpg" title="Dragon">
                        <img src="images/smalldragon.jpg" alt="" />
                    </a>
                </div>

有几个这样的菜单项...

Accordion 菜单的脚本...

$(function() 
{
    $('#st-accordion').accordion(
    {
        oneOpenedItem   : true
    });
});

$(document).ready(function() 
{
    $(".fancybox-thumb").fancybox(
    {
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : 
        {
            title   : 
            {
                type: 'outside'
            },
            thumbs  : 
            {
                width   : 50,
                height  : 50
            }
        }
    });
});

还有比我想出的更好的解决方案吗？或者一种简化我的解决方案的方法？感谢您的帮助。

Answer 1

我认为在加载之前隐藏照片的一个简单方法是让它们display:none直到文档准备好。在 css 中创建一个名为 hidden 的类，并为其指定样式 display:none。将类添加到所有图像。

然后在 $(document).ready 调用中添加一行作为 fancybox 回调，或者在设置类似 $("img.hidden") 的精美框之后添加一行。 removeClass("隐藏");.