Question

这是我的HTML：

<div class="Album1">
<ul>
    <li class="pic1"><a href=""><img src="#" alt=""></a></li>
    <li class="pic2"><a href=""><img src="#" alt=""></a></li>
    <li class="pic3"><a href=""><img src="#"alt=""></a></li>
</ul>
</div>

如何点击其中一张图像放大图像，其他两张图像消失，然后当我再次点击图像时，它会恢复到常规尺寸，另外两张图像会出现？< / p>

我的js：

$(".Album1").click(function(event) {
    event.preventDefault();
    var largeImage = $(this).attr("rel");
    console.log(largeImage);

    $(".Album1 a").children().removeClass("currentImage");

    $(largeImage).addClass("currentImage");
});

Answer 1

如果你有一个更大版本的每个图像（你应该），你可以在其他图像上做$（）。hide（），同时使用模态（或对话框）弹出和显示较大的选定图像。

点击模态或对话时反转所有内容

Answer 2

你可以在li元素上绑定事件;例如：

$（＆＃39; .Album1 li＆＃39;）。click（function（）{ $（本）.siblings（＆＃39;李＆＃39;）。切换（）; 返回false; }）

如何点击一个图像并将其放大并用jquery隐藏剩下的两个图像？

2 个答案: