优化jquery代码动画动作

我迈出了jquery的第一步，并且我已经编写了用于动画图库的第一段代码。问题是:

我有一些封面图片和相关的内容div，隐藏(高度:0;)。
每次点击一个封面图片，相关的div打开(改变高度值)。
如果相关div已经打开，则关闭。如果打开了另一个相关的div，则关闭并打开正确的div。
如果点击"关闭"按钮，则关闭当前打开的div。

代码工作完美，但我找不到一个语法，可以只放置一次。现在的方式是，我必须为每个新的"封面图片/内容div"(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;
}

我同意techfoobar的观点，你不应该在不同的元素上有多个相同的id，所以我修改了我的答案(你可以技术上用类来做，我想…)。将类的id改为类的id，类的id改为Gallery类元素的id(并修改相应的CSS)后，您可以为每个彩色方块赋予一个' Gallery '属性(指向它打开的库)，并为所有彩色方块附加一个点击事件处理程序，该处理程序查找该Gallery属性以查找要显示的内容:

$(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/

相关内容

最新更新

热门标签：