Question

我在jquery中迈出了第一步，并且我已经编写了第一段代码来制作动画画廊。事情是：

我有一些封面照片和相关内容div，它们是隐藏的（高度：0;）。
每次单击一个封面图片时，相关的div将打开（更改高度值）。
如果相关的div已经打开，它会关闭。如果打开另一个相关的div，它将关闭并打开正确的div。
如果＆＃34;关闭＆＃34;单击按钮，它将关闭当前打开的div。

代码运行正常，但我找不到可以放置一次的语法。现在的方式，我必须为每个新的＆＃34;封面图片/内容div重复脚本＆＃34; （g1 / lg1 g2 / lg2 g3 / lg3 - 在本例中），指定选择器。

如何让所有封面图片和相关内容div只指定一对选择器？

这里是代码：（http://jsfiddle.net/samuelleal/9PL3S/3/）

$(function () {

    $('.close').click(function () {
        if ($(this).parent().height() > 0) {
            $(this).parent().removeClass('open').animate({
                height: "0px"
            }, 500);
        } else {}
    });

    $('.lg1').click(function () {
        if ($('.g1').height() > 0) {
            $('.g1').removeClass('open').animate({
                height: "0px"
            }, 500);
        } else {
            $('.gallery:not(.g1)').removeClass('open').animate({
                height: "0px"
            }, 500, function () {
                $('.g1').addClass('open').animate({
                    height: "80px"
                }, 500);
            });
        }
    });

    $('.lg2').click(function () {
        if ($('.g2').height() > 0) {
            $('.g2').removeClass('open').animate({
                height: "0px"
            }, 500);
        } else {
            $('.gallery:not(.g2)').removeClass('open').animate({
                height: "0px"
            }, 500, function () {
                $('.g2').addClass('open').animate({
                    height: "80px"
                }, 500);
            });
        }
    });

    $('.lg3').click(function () {
        if ($('.g3').height() > 0) {
            $('.g3').removeClass('open').animate({
                height: "0px"
            }, 500);
        } else {
            $('.gallery:not(.g3)').removeClass('open').animate({
                height: "0px"
            }, 500, function () {
                $('.g3').addClass('open').animate({
                    height: "80px"
                }, 500);
            });
        }
    });

});

HTML

<body id="body">
<div id="strip" class="f4">
    <ul>
        <li>
            <div class="lg1 pics orange" />
        </li>
        <li>
            <div class="lg2 pics red" />
        </li>
        <li>
            <div class="lg3 pics green" />
        </li>
    </ul>
    <div class="gallery g1">
        <div class="close blue">close</div>
        <ul>
            <li>
                <div class="pics orange"></div>
            </li>
            <li>
                <div class="pics orange"></div>
            </li>
            <li>
                <div class="pics orange"></div>
            </li>
            <li>
                <div class="pics orange"></div>
            </li>
            <li>
                <div class="pics orange"></div>
            </li>
        </ul>
    </div>
    <div class="gallery g2">
        <div class="close blue">close</div>
        <ul>
            <li>
                <div class="pics red"></div>
            </li>
            <li>
                <div class="pics red"></div>
            </li>
            <li>
                <div class="pics red"></div>
            </li>
            <li>
                <div class="pics red"></div>
            </li>
            <li>
                <div class="pics red"></div>
            </li>
        </ul>
    </div>
    <div class="gallery g3">
        <div class="close blue">close</div>
        <ul>
            <li>
                <div class="pics green"></div>
            </li>
            <li>
                <div class="pics green"></div>
            </li>
            <li>
                <div class="pics green"></div>
            </li>
            <li>
                <div class="pics green"></div>
            </li>
            <li>
                <div class="pics green"></div>
            </li>
        </ul>
    </div>
</div>

CSS

.pics, li {
    width: 50px;
    height: 50px;
    display: inline-block;
    margin: 0 10px;
    cursor: pointer;
}
.green {
    background-color: darkgreen;
}
.blue {
    background-color: darkblue;
}
.red {
    background-color: darkred;
}
.orange {
    background-color: darkorange;
}
.close {
    float: left;
    height: 20px;
    position: relative;
    width: auto;
    padding: 0 5px;
    color: white;
    cursor: pointer;
}
#strip > ul {
    width: 100%;
    height: 80px;
    display: block;
}
.gallery {
    height: 0;
    width: 100%;
    overflow: hidden;
    background-color: gray;
}
ul li {
    list-style: none;
}

Answer 1

我同意techfoobar，你不应该在不同的元素上有多个相同的ID，所以我修改了我的答案（你可以技术上用类做，我想.. ）。将ID更改为类，将类更改为Gallery类元素的ID（以及修改相应的CSS）后，您可以为每个彩色方块指定一个＆＃39; gallery＆＃39;属性（指向它打开的图库）并将点击事件处理程序附加到所有彩色方块，这些方块查看该图库属性以查找要显示的那个：

$(document).on('click','#strip ul li div',function(){
    var gallery = $(this).attr('gallery');
    if ($('#'+gallery).height() > 0) {
        $('#'+gallery).removeClass('open').animate({
            height: "0px"
        }, 500);
    } else {
        $('.gallery:not(#'+gallery+')').removeClass('open').animate({
            height: "0px"
        }, 500, function () {
            $('#'+gallery).addClass('open').animate({
                height: "80px"
            }, 500);
        });
    }
  });

请在此处查看：http://jsfiddle.net/Qv9KR/1/

优化用于动画动作的jquery代码

1 个答案: