0

嗨，这是我正在研究的 jsfiddle 的链接：http: //jsfiddle.net/edddotcom/7NQKU/6/

这个想法是，当您单击一个图像时，它的容器会放大并显示一些文本，现在如果您然后单击第二个图像，则第一个图像应该收缩回较小的无文本状态，

我想不出一种方法可以做到，所以当单击一个图像时，除了this应该收缩的所有图像（如果它们处于较大状态）

我将使用超过 2 张图片，因此我需要将此规则应用于所有其他 n-1 张图片

HTML：

<div class="row">
    <div class="container">
        <img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>

    </div>
    <div class="container">
        <img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>

    </div>
    <div class="container">
        <img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>

    </div>
</div>

CSS：

.row {
    max-width: 1500px;
}
.container {
    display: block;
    width: 200px;
    height: 116px;
    background-color: red;
    float: left;
    margin: 5px;
}
span {
    margin-top: 10px;
    margin-left: 10px;
    max-height: 100%;
    text-align: justify;
}
img {
    width:100%;
    max-width: 400px;
    min-width: 200px;
}

JavaScript：

$(document).ready(function () {
    //ON CLICK
    $("span").hide();
    $("img").toggle(function () { //fired the first time
        $(this).parent().animate({
            //FIRSTCLICK COMMAND
            height: "400px",
            width: "400px"

        }, function () {
            $(this).children("span").show();
        });
        //Enlarges container then shows text

    }, function () { // fired the second time 
        $(this).siblings("span").hide(0, '', function () {
            $(this).parent(".container").animate({
                //SECONDCLICK COMMAND
                height: "116px",
                width: "200px"
            });
        });

    }); //Hides text then contracts container

});
4

1 回答 1

3

假设您在事件处理程序中并且this是当前图像，您可以选择除当前图像之外的所有图像，如下所示：

 $(".container img").not(this)

这将允许您对所有其他图像进行操作。如果在这些其他图像中，您想知道哪个是展开的，您可以检查容器大小，也可以在展开的图像上放置一个类。如果您在扩展类上放置一个特殊类，那么您可以使用自己的选择器找到扩展类：

$(".container.expanded")

或者，检查大小：

$(".container").not(this).each(function() {
    if ($(this).height() > 200) {
        // this container is expanded so we need to contract it
    }
});

在您的特定代码中，看起来您可以更改：

$(this).siblings("span").hide...

对此：

// within our row, find all containers except the current container
$(this).closest(".row")
    .find(".container").not($(this).closest(".container"))
    .find("span").hide...
于 2013-04-21T22:29:02.790 回答