Question

我有一组方框，我不知道确切的数字，而sub div设置为none：

  <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');
        });
    });
});

任何？

Answer 1

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

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

动画很容易，所以你可以实现它。

Answer 2

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

你在寻找这样的东西：http://jsbin.com/uwoxur ??

要查找打开的框，您可以执行以下操作：http://api.jquery.com/visible-selector/

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

Answer 3

这是我在第一个问题中写的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);
});
});
 });
});
 });

点击并打开一个框，同时关闭另一个

3 个答案: