打开一个盒子，把另一个缩小到原来的尺寸

Question

可能重复：
打开展开/关闭回原始尺寸带有img渐变的一系列盒子

我正在为这个逻辑而挣扎，我无法让它发挥作用。我需要遍历每个框，以获得原始高度并保存它。然后，我需要能够单击并展开和项目，同时检查是否有其他框打开，如果有，则将其关闭回原始高度和宽度（这是一个设置的宽度）。我唯一挣扎的是，这是我在完整脚本开始时所拥有的，我用我（我认为这是错误的）尝试做的逻辑对它进行了评论。这部分后面的代码很好，如果你想在这里仔细检查，它是一个带有完整脚本的pastebin：http://pastebin.com/u72Q5Cqj

基本html结构

<div class="box">
  <img src="test.jpg" />
  <div class="info"></div>
</div>
<div class="box">
  <img src="test2.jpg" />
  <div class="info"></div>
</div>
<div class="box">
  <img src="test3.jpg" />
  <div class="info"></div>
</div>

Jquery

    //run the function for all boxes
    $(".box").each(function () {
            var item = $(this);
            var thumb = $("a", item);
            var infoBox = $(".info", item);
            // save each box original height 
            $.data(this, 'height', $(this).height());
            item.click(function(e) {
                    e.preventDefault();
                    // remove any box with class "opened"
                    $(".box").removeClass("opened");
                    // this is to empty ".info" which is a child div in which
                    // I load  content via ajax into
                    $(".info").empty();
                    // here i'm saying if any box doesn't have a class "opened"
                    // fadeIn its `<a>`, i am fadingOut later in the code
                    $(".box a").not(".opened").fadeIn("slow");
                    //set back `.info`width and height to auto, is empty anyway
                    $(".box .info").not.css({
                            "width": "auto",
                            "height": "auto"
                    });
                    // in here i'm trying to set back any box without a class "opened"
                    // back to its original width which is a set width
                    $(".box").not(".opened").css("width", "230");
                    // in here i'm trying to set back any box without a class "opened"
                    // back to its original height saved at the beginning of the code 
                    $.data($(".box"), 'height');
                    // now I add the class opened to this clicked item
                    item.addClass("opened");      
                    // check if it has a class "opened" and if so do the rest 
                    if (item.hasClass("opened")) {
                            var url = this.href;.................etc

Answer 1

好吧，我没有办法尝试解决方案，但您的代码有一些错误
您声明了两次newHeight，但没有声明iframe，并且在if语句的末尾有一个意外的;
那么，为什么要在each()中调用$(this)上的click()事件呢？这似乎没有必要，而且可能对性能没有好处。您可以在循环和单击事件链之外声明您的变量。

$('.box').each().click();

最后，我建议您为load()和click()事件创建一个函数，以保持干燥。

Answer 2

这是我的最后一个代码，它可以工作：

$(function(){
//run the function for all boxes
$(".box").each(function () {
    var item = $(this);
    var thumb = $("a", item);
    var infoBox = $(".info", item);
    thumb.click(function(e) {
        e.preventDefault();
        $(".box").removeClass("opened");
        $(".info").empty();
            $(".box a").fadeIn("slow");
        $(".info").css({
                    "width": "auto",
                    "height": "auto"
                });
        $(".box a").css("width", "230"); 
        $(".box a").css("height", "auto");          
        $(".box").css("width", "230"); 
        $(".box").css("height", "auto");
        item.addClass("opened"); 
        if (item.hasClass("opened")) {
            var url = this.href;
            thumb.fadeOut("slow");
                infoBox.css({
                        "visibility": "visible",
                    "height": "auto"
                });
                infoBox.load(url, function () {
                    var newHeight = infoBox.outerHeight(true);
                    $(".readMore", item).click(function (e) {
                        var selector = $(this).attr('data-filter-all');
                                $('#container').isotope({
                                    filter: selector
                                });
                                $('#container').isotope('reloadItems');
                                return false;
                    });
                    $('<a href="#" class="closeBox">Close</a>"').appendTo(infoBox).click(function (e) {
                                e.preventDefault();
                                $("html, body").animate({scrollTop: 0}, 500);
                                $('#container').isotope('reLayout');
                            });
                    item.animate({
                        "width": "692",
                        "height": newHeight
                    }, 300);
                    thumb.animate({
                                "width": "692",
                                "height": newHeight
                    }, 300);
                    infoBox.animate({width: 692, height: newHeight}, function () {
                                $('#container').isotope('reLayout', function () {
                                    Shadowbox.setup();
                                    item.removeClass("loading");
                                    infoBox.css({
                                            "visibility": "visible"
                                    });
                                        var videoSpan = infoBox.find("span.video");
                            iframe = $('<iframe/>', {
                                            'frameborder': 0,
                                            'class': 'tide',
                                            'width': '692',
                                            'height': '389',
                                            'src': 'http://player.vimeo.com/video/' + videoSpan.data("vimeoid") + '?autoplay=0&api=1'
                            });
                            videoSpan.replaceWith(iframe);
                                });
                    });
            });
            };
        });
});
 });