jquery - 每次点击切换 1 个 div，再次点击关闭之前打开的 div

Question

我有 2 组，每组 4 个 div。 现在我想在 we we are section 中实现类似 togglehead hav 的效果尝试点击任何一张员工照片，它会打开一个 div，一旦你点击另一张员工照片，它就会关闭上一个并打开一个新单击的员工详细信息 div。

一行中有 2 组 4 个 div，其中包含 togglehead 等员工的照片。 单击时我想在单独的 div 中显示详细信息，如 togglehead

我要达到这个结果

这是我尝试过的方法，它可以正常工作，但没有像 togglehead 那样产生效果。

$(document).ready(function() {
  $(".click-box-open").on('click', function() {
    var $ans = $(this).next(".click-box");
    $ans.slideToggle();
    $(".click-box").not($ans).slideUp();
  });
});

.click-box {
  background: red;
  width: 100% !important;
  color: #000;
  height: 300px;
  padding: 15px 0 15px 0;
  letter-spacing: 1px;
  display: none;
  position: fixed;
  left: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row mt-30">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
      <a href="javascript:void(0)" class="click-box-open">
        <div class="team-container">
          <img src="images/product.jpg" alt="" class="img-responsive center-block" />
        </div>
        <h4 class="text-center text-black">MITCHELL KAPPOS</h4>
        <h5 class="text-center text-black">Designer</h5>
        <h6 class="text-center text-black">Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.</h6>
      </a>
      <div class="click-box mt-30">

        <h4 class="text-center">MITCHELL KAPPOS</h4>
        <h5 class="text-center">Designer</h5>
        <h6 class="text-center">
						Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga. Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.
					</h6>

      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
      <a href="javascript:void(0)" class="click-box-open">
        <div class="team-container">
          <img src="images/product1.jpg" alt="" class="img-responsive center-block" />
        </div>
        <h4 class="text-center text-black">LEONARDO DA VINCI</h4>
        <h5 class="text-center text-black">Artist</h5>
        <h6 class="text-center text-black">Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.</h6>
      </a>
      <div class="click-box mt-30">
        <a href="javascript:void(0)" class="click-close-btn">
          <i class="fa fa-times fa-lg text-white pull-right mr-30" aria-hidden="true"></i>
        </a>
        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <h4 class="text-center">LEONARDO DA VINCI</h4>
              <h5 class="text-center">Artist</h5>
              <h6 class="text-center">
									Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga. Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.
								</h6>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
      <a href="javascript:void(0)" class="click-box-open">
        <div class="team-container">
          <img src="images/product2.jpg" alt="" class="img-responsive center-block" />
        </div>
        <h4 class="text-center text-black">JOHN DOE</h4>
        <h5 class="text-center text-black">Project Manager</h5>
        <h6 class="text-center text-black">Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.</h6>
      </a>
      <div class="click-box mt-30">
        <a href="javascript:void(0)" class="click-close-btn">
          <i class="fa fa-times fa-lg text-white pull-right mr-30" aria-hidden="true"></i>
        </a>
        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <h4 class="text-center">JOHN DOE</h4>
              <h5 class="text-center">Project Manager</h5>
              <h6 class="text-center">
									Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga. Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.
								</h6>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
      <a href="javascript:void(0)" class="click-box-open">
        <div class="team-container">
          <img src="images/product4.jpg" alt="" class="img-responsive center-block" />
        </div>
        <h4 class="text-center text-black">JOHN DOE</h4>
        <h5 class="text-center text-black">Project Manager</h5>
        <h6 class="text-center text-black">Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.</h6>
      </a>
      <div class="click-box mt-30">
        <a href="javascript:void(0)" class="click-close-btn">
          <i class="fa fa-times fa-lg text-white pull-right mr-30" aria-hidden="true"></i>
        </a>
        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <h4 class="text-center">JOHN DOE</h4>
              <h5 class="text-center">Project Manager</h5>
              <h6 class="text-center">
									Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga. Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.
								</h6>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

更新 我尝试删除 position:fixed; 并添加 position:absolute; 但并非没有运气。

DEMO

Answer 1

要分离div，需要更改click-box css

做一个笔记*

position fixed 几乎和绝对一样。

.click-box {
position:relative;
}

DEMO