Javascript 打开一个盒子，将另一个盒子收回到原来的尺寸

可能重复：

我正在与这种逻辑作斗争，但我无法让它发挥作用。我需要遍历每个框，以获得原始高度并保存它。然后，我需要能够单击并展开项目，同时检查其他项目是否打开，如果打开，则将其关闭回其原始高度和宽度（这是一个设置的宽度）。我唯一挣扎的地方就是我在整个脚本的开头，我已经用我（我认为是错误的）试图做的逻辑对它进行了评论。这部分后面的代码很好，如果您想在这里再次检查它，它是一个带有完整脚本的粘贴库：

基本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

//为所有框运行该函数
$（“.box”）。每个（函数（）{
var项目=$（此项）；
变量thumb=$（“a”，项目）；
变量信息框=$（“.info”，项目）；
//保存每个框的原始高度
$.data（此为'height'，$（此为.height（））；
项目。单击（功能（e）{
e、 预防默认值（）；
//移除任何“已打开”类的框
$（“.box”）.removeClass（“打开”）；
//这是为了清空“.info”，它是其中的一个子div
//我通过ajax将内容加载到
$（“.info”）.empty（）；
//这里我是说，如果任何盒子没有“打开”类
//fadeIn它的``，我将在代码中稍后淡出
美元（“.box a”）。未（“.opened”）。fadeIn（“慢”）；
//将“.info”宽度和高度设置为“自动”，但仍为空
$（“.box.info”）.not.css({
“宽度”：“自动”，
“高度”：“自动”
});
//在这里，我试着在没有“打开”类的情况下，将任何框向后放置
//返回其原始宽度，即设置的宽度
$（“.box”）。未（“.opened”）.css（“宽度”，“230”）；
//在这里，我试着在没有“打开”类的情况下，将任何框向后放置
//返回到代码开头保存的原始高度
$.data（$（“.box”），“height”）；
//现在，我将打开的类添加到此单击的项中
项目。添加类别（“打开”）；
//检查是否有“打开”的类，如果有，则执行其余的操作
如果（项hasClass（“打开”））{
var url=this.href；etc

嗯，我没有办法尝试解决方案，但您的代码有一些错误。
您两次声明了

newHeight

，没有声明

iframe

，并且在

if

语句末尾出现了一个意外的

；

。
那么，为什么要在

$（this）

中调用

each（）

上的

click（）

事件呢？这似乎是不必要的，而且可能对性能没有好处。您可以在循环和click事件链之外声明变量

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

---

最后，我建议您为您的

load（）

和

click（）

事件创建一个函数，以保持干燥。

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

$(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);

                                });
                    });
            });
            };
        });
});
 });

$（函数（）{
//对所有框运行该函数
$（“.box”）。每个（函数（）{
var项目=$（此项）；
变量thumb=$（“a”，项目）；
变量信息框=$（“.info”，项目）；
拇指。点击（功能（e）{
e、 预防默认值（）；
$（“.box”）.removeClass（“打开”）；
$（“.info”）.empty（）；
美元（“.box a”）.fadeIn（“慢”）；
$（“.info”）.css({
“宽度”：“自动”，
“高度”：“自动”
});
$（“.box a”）.css（“宽度”，“230”）；
$（“.box a”）.css（“高度”、“自动”）；
$（“.box”）.css（“宽度”，“230”）；
$（“.box”）.css（“高度”、“自动”）；
项目。添加类别（“打开”）；
如果（项hasClass（“打开”））{
var url=this.href；
拇指淡出（“慢”）；
infoBox.css({
“可见性”：“可见”，
“高度”：“自动”
});
load（url，函数（）{
var newHeight=infoBox.outerHeight（true）；
$（“.readMore”，项目）。单击（函数（e）{
var选择器=$（this.attr（'data-filter-all'）；
$（“#容器”）。同位素({
过滤器：选择器
});
$（“#容器”）。同位素（“重新装载的物品”）；
返回false；
});
$（“”）。附加到（信息框）。单击（函数（e）{
e、 预防默认值（）；
$（“html，body”）.animate（{scrollTop:0}，500）；
$（“#容器”）。同位素（‘重新部署’）；
});
项目.动画({
“宽度”：“692”，
“高度”：新高度
}, 300);
拇指动画({
“宽度”：“692”，
“高度”：新高度
}, 300);
动画（{width:692，height:newHeight}，函数（）{
$（'#container'）。同位素（'reLayout'，函数（）{
Shadowbox.setup（）；
项目。移除类（“加载”）；
infoBox.css({
“可见性”：“可见”
});
var videoSpan=infoBox.find（“span.video”）；
iframe=$（“”{