使用手风琴菜单进行图像演示

Image presentation using an accordion menu

本文关键字：图像 手风琴 菜单      更新时间：2023-09-26

我有一个这样的菜单：

<ul class="leve1">
    <li>
        <div class="some">
            <a href="images/image1.jpg">image1</a>
            <a href="images/image2.jpg">image2</a>
            <a href="images/image3.jpg">image3</a>
            ...
        </div>
    </li>
    ...
</ul>

而且我在 html 的另一个位置也有一个div

<div id="dest"></div>

我想单击链接并使图像出现在div 中。我尝试了一些代码行，例如 

$(document).ready(function () {
    $("div.some a").click(function (event) {
        event.preventDefault();
        $("div#dest").html($("<img>").attr("src", this.href).fadeIn(1000));
    });
});

但它什么也没做。div 保持空白。

我搜索了这些论坛，但找不到合适的答案。

更新

我也有一些javascript可以使上面的菜单成为一个重复的菜单。这些入侵（隐藏，显示和切换 - 一堆！）会与此代码冲突吗???

添加图像后立即调用淡入：如果图像加载时间过长怎么办？它显示在淡入淡出的中间或淡入淡出结束后：jsfiddle.net/Xt5La/

您可以在图像上使用加载处理程序，请参阅此小提琴：jsfiddle.net/UNqJh/。

var img = new Image();
img.onload = loaded;
img.src = url;
function loaded() { // load handler }

在旁注中，它还可以帮助查看图像是否实际加载。但更简单的是，您的控制台说什么？图像是否添加到 DOM 中？

相关文章：