打开展开/关闭回到原始大小一系列带有img淡入淡出的盒子

Question

我有一系列可点击的盒子。我需要能够展开盒子并隐藏它的img。我还需要能够关闭以前打开的一个，将其恢复到其原始高度和定义的宽度，同时在其img中回退。 .info 加载ajax内容

<div class="box">
   <img src="#" />
   <div class="info"></div>
</div>
<div class="box">
   <img src="#" />
   <div class="info">Ajax load content</div>
</div>
<div class="box">
   <img src="#" />
   <div class="info">Ajax loads content</div>
</div>

的css，不知道高度。

.box {
  width: 230px;
  height: auto;
}

.info {
  height: auto;
  width: auto;
}

我试过了

$(".box").each(function(){
    var box = $(this);
    box.data('height', $(this).height());
    box.click(function(){
       box.addClass("opened");
       if(box.hasClass("opened"){
           $("img", this).fadeOut("slow", function(){
               box.css("width", "600");
               box.css("height", "500");
               box.removeClass("opened");
           });
       } else { 
           $("img", this).fadeIn("slow");
           box.width(230);
           box.height(box.data('height'));
    });
});

Answer 1

这是我最后的有效代码： 通用标签

Answer 2

有一些语法错误，就像@Diodeus提到的那样。您应该始终首先使用调试器来找出答案。

你也有 if(box.hasClass(".opened")) 这是错误的（你不应该在那里的类之前添加一个点）。你也有 box.addClass('opened'); 就在那之前 if, ，这打破了功能（当你显示/隐藏内容时，你应该添加/删除类，没有其他地方）。

这就是你要找的吗？

    $(".box").each(function(){
        var box = $(this);
        box.data('height', $(this).height());
        box.click(function(){
           if(!box.hasClass("opened")){
               $("img", box).fadeOut("slow", function(){
                   box.css("width", "600");
                   box.css("height", "500");
                   box.removeClass("opened");
               });
           } else { 
               $("img", box).fadeIn("slow");
               box.width(230);
               box.height(box.data('height'));
                box.addClass("opened");
            }                
        });
    });​

Answer 3

http://jsfiddle.net/uFz5A/ 通用标签