点击打开一个箱子，同时关闭其他

我有一组箱子，我不知道与子格设置为显示没有确切的数字：点击打开一个箱子，同时关闭其他

<div class="box"> 
    <div class="content"> 
     <div class="info" style="display: none;"></div> 
    <div> 
    <div> 
    <div class="box"> 
    <div class="content"> 
     <div class="info" style="display: none;"></div> 
    <div> 
    <div> 
    <div class="box"> 
    <div class="content"> 
     <div class="info" style="display: none;"></div> 
    <div> 
    <div>

我要寻找简单而正确的jQuery打开动画（动画到给定的固定高度和宽度），点击一个框，加载其内容并在关闭时显示动画，并将高度和宽度恢复到之前打开的框的原始值。

类似的东西，但它不工作：

$(function() { 
    $(".box").click(function (e) { 
     e.preventDefault(); 
     $(".box .content .info").empty(); 
     $(".box").hide('slow'); 
     var url = this.href + " .content"; 
     $(".info", this).load(url, function() { 
      $(".box", this).show('slow'); 
     }); 
    }); 
});

有人吗？

来源

2012-02-09 rob.m

，这里是我的HTML最终的解决方案在我的第一个问题写道：

$(".box").each(function() { 
//we set needed variables 
var item = $(this); 
var thumb = $("a", item); 
var infoBox = $(".info", item); 
thumb.click(function (e) { 
    e.preventDefault(); 
    item.addClass("loading"); 
    $(".box a").fadeIn(); 
    thumb.fadeOut(); 
      $(".selected").width(230); 
    $(".selected").height(129); 
    item.addClass("selected"); 
    var url = this.href + " .content"; 
item.addClass("loading"); 
infoBox.css({ 
    "visibility": "hidden", 
"height": "auto" 
}); 

infoBox.load(url, function() { 
var newHeight = infoBox.outerHeight(true); 

item.css({ 
    width: 692, 
    height: newHeight 
}); 
infoBox.animate({ 
    width: 692, 
    height: newHeight 
}, function() { 
    $('#container').isotope('reLayout', function(){ 
    item.removeClass("loading"); 
    infoBox.css({"visibility": "visible"}); 
    var videoSpan = infoBox.find("span.video"); 
    var iframe = $('<iframe/>', { 
      'frameborder' : 0, 
      'width' : '692', 
      'height' : '389', 
      'src' : 'http://player.vimeo.com/video/'+ videoSpan.data("vimeoid") +'?autoplay=0&api=1' 
    }); 
    videoSpan.replaceWith(iframe); 
}); 
}); 
}); 
}); 
});

来源

2012-02-09 23:28:59

如果你有一个菜单系统，你可以这样做：

$('.menu a').on('click', function() { 
    $('.box').eq($(this).index()).show().siblings().hide(); 
});

动画是很容易做到，这样你就可以实现它。

来源

2012-02-09 17:56:41 Blender

我需要能够实际点击在一个盒子里，它不是一个ul列表，基本上是我张贴的简单的html标记，我需要能够点击每个盒子并在关闭先前扩展的盒子时展开。 – 2012-02-09 17:58:24

但是如果你隐藏盒子，你怎么点击它？ – Blender 2012-02-09 18:00:15

我没有说过隐藏，我说接近:) – 2012-02-09 18:00:55

不要忘了关闭你的...你现在打开6次。

你是在找这样的：http://jsbin.com/uwoxur ??

要找到打开的盒子，你可以这样做：http://api.jquery.com/visible-selector/

$(".box:visible").doWhatYouWant();

来源

2012-02-09 18:23:17 Richard

您可以拥有任意数量的：http://jsbin.com/ezozek – Richard 2012-02-09 18:29:36

和手风琴：http://jsbin.com/azuxom – Richard 2012-02-09 18:32:10

事情是，如果你打开一个你需要关闭另一个 – 2012-02-09 18:32:43

点击打开一个箱子，同时关闭其他

回答

相关问题