打开另一个div时关闭一个div

Question

（第一次海报）

正如我的名字所说，当谈到jquery时，我是一个菜鸟，所以这是我的问题，我得到了这3个盒子，我可以打开＆＃34;并且＆＃34;关闭＆＃34;但是当我打开一个时我想让其他盒子关闭......我已经找到了答案，但是如果你知道这个问题是否已被回答，那么就找不到答案然后这样说并发布链接：）< / p>

＆＃13;

＆＃13;

$('.box').click(function() {
  var clicks = $(this).data('clicks');

  if (clicks) {
    //odd click
    $(this).animate({
      height: '3rem'
    }, 500);

  } else {
    //even click
    $(this).animate({
      height: '13rem'
    }, 500);

  }
  $(this).data("clicks", !clicks);


});

＆＃13;

.box {
  height: 3rem;
  width: 10rem;
  background-color: #be6666;
  overflow: hidden;
}
.inside {
  height: 0rem;
  margin-top: 3rem;
  background-color: #be6666;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  padding: 0 5px;
}
.content {
  margin-top: 2rem;
  margin-left: 2rem;
  display: flex;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="box">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
  <div class="box" style="margin-left:1rem;margin-right:1rem">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
  <div class="box">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

展开框时，遍历所有框并折叠其他框。这可以使用$('.box').each来实现。对扩展框的引用保存在回调函数之外，并与每个迭代框进行比较。您可以使用此参考来确定哪个不会崩溃。

＆＃13;

＆＃13;

$('.box').click(function() {
  var clicks = $(this).data('clicks');

  if (clicks) {
    //odd click
    $(this).animate({
      height: '3rem'
    }, 500);

  } else {
    //even click
    $(this).animate({
      height: '13rem'
    }, 500);

    // close any open boxes other than the expanding on
    var box = this;
    $('.box').each(function(index, element) {
      if (box != element) {
        $(element).animate({
          height: '3rem'
        }, 500);
        $(element).data("clicks", 0);
      }
    });
  }

  $(this).data("clicks", !clicks);
});

＆＃13;

.box {
  height: 3rem;
  width: 10rem;
  background-color: #be6666;
  overflow: hidden;
}
.inside {
  height: 0rem;
  margin-top: 3rem;
  background-color: #be6666;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  padding: 0 5px;
}
.content {
  margin-top: 2rem;
  margin-left: 2rem;
  display: flex;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="box">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
  <div class="box" style="margin-left:1rem;margin-right:1rem">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
  <div class="box">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

编辑我不确定这完全是犹太人，但我喜欢@Kind用户的基于CSS的方法，并提出了另一种解决方案。这种方法使代码保持精简和平均值。但也保留了＆＃34;点击关闭＆＃34;功能。

无论如何，道具给@Kind用户。

＆＃13;

＆＃13;

$('.box').click(function() {
  
  // toggle open/close
  if ($(this).is(".opened")) {
    $(this).removeClass("opened")
  } else {
    $(this).addClass("opened")
    
    // close others
    var box = this;
    $('.box')
      .filter(function(index, element) {
        return element != box;
      })
      .removeClass("opened");
  }
});

＆＃13;

.box {
  height: 3rem;
  width: 10rem;
  background-color: #be6666;
  overflow: hidden;
  transition: all .5s ease;
}
.inside {
  height: 0rem;
  margin-top: 3rem;
  background-color: #be6666;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  padding: 0 5px;
}
.content {
  margin-top: 2rem;
  margin-left: 2rem;
  display: flex;
}
.opened {
  height: 13rem;
  transition: all .5s ease;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="box">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
  <div class="box" style="margin-left:1rem;margin-right:1rem">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
  <div class="box">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您使用了animate提供的jQuery方法，我想建议您提供更简单，更好的解决方案。

＆＃13;

＆＃13;

$('.box').click(function() {
  $(this).toggleClass('opened');
  $('.box').not(this).removeClass('opened');
});

＆＃13;

.box {
  height: 3rem;
  width: 10rem;
  background-color: #be6666;
  overflow: hidden;
  transition: all .5s ease;
}
.inside {
  height: 0rem;
  margin-top: 3rem;
  background-color: #be6666;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  padding: 0 5px;
}
.content {
  margin-top: 2rem;
  margin-left: 2rem;
  display: flex;
}
.opened {
  height: 13rem;
  transition: all .5s ease;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="box">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
  <div class="box" style="margin-left:1rem;margin-right:1rem">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
  <div class="box">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以将状态信息存储为属性以选择它来打开/关闭。 jQuery允许自动选择属性和运行每个选定元素的函数。

＆＃13;

＆＃13;

function openOrClose(o, open) {
  o.animate({
    height: open ? '13rem' : '3rem'
  }, 500);  
  o.attr('data-state', open ? 'open' : 'closed');
}

$('.box').click(function() {
  if($(this).attr('data-state') != 'open') {
    // a click on a closed box
    
    // close the open boxes
    openOrClose($('.box[data-state=open]'), false);
    
    // open 'this'
    openOrClose($(this), true);
  }else{
    // a click on an already open box
    // so close it
    openOrClose($(this), false);
  }
});

＆＃13;

.box {
  height: 3rem;
  width: 10rem;
  background-color: #be6666;
  overflow: hidden;
}
.inside {
  height: 0rem;
  margin-top: 3rem;
  background-color: #be6666;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  padding: 0 5px;
}
.content {
  margin-top: 2rem;
  margin-left: 2rem;
  display: flex;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="box">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
  <div class="box" style="margin-left:1rem;margin-right:1rem">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
  <div class="box">
    <div class="inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;