单击并打开一个框，同时关闭另一个框答案

【问题标题】：click and open a box while closing the other单击并打开一个框，同时关闭另一个框
【发布时间】：2012-02-09 17:54:38
【问题描述】：

我有一组盒子，我不知道子 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>
  <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');
        });
    });
});

有人吗？

【问题讨论】：

标签： jquery

【解决方案1】：

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

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

动画做起来很简单，所以你可以实现它。

【讨论】：

我需要能够实际点击一个框，它不是一个 ul 列表，基本上是我发布的纯 html 标记，我需要能够点击每个框并在之前关闭时展开展开一个。
但是如果你隐藏了这个框，你怎么能点击呢？
我没有说隐藏，我说关闭:)
"display: none; 隐藏该框。一定有其他方法可以让这些框出现，不是吗？
如果我提供 .show() 它将显示：无可见，这不是困难，我只是在寻找一个能够点击一个框的通用循环，将其定义为“已选择”，因此“打开它”，同时使另一个“未选择”并“关闭它们”。打开它是指将其设置为固定高度和宽度，关闭是指取回原始高度和宽度值

【解决方案2】：

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

您是否正在寻找这样的东西：http://jsbin.com/uwoxur ??

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

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

【讨论】：

事情是如果你打开一个，你需要相应地关闭另一个
是的，我已尝试将其应用于我需要检查更新的问题代码

【解决方案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);
});
});
 });
});
 });

【讨论】：