點擊打開一個箱子，同時關閉其他

我有一組箱子，我不知道與子格設置爲顯示沒有確切的數字：點擊打開一個箱子，同時關閉其他

<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

點擊打開一個箱子，同時關閉其他

回答

相關問題