我有一系列可点击的框。我需要能够展开这些框并隐藏它的 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'));
});
});