每次点击时切换1 div并在另一次点击时关闭之前打开的div

时间：2016-05-11 11:54:40

标签： jquery html css slidetoggle

我有两套4 divs。 现在我希望在we we are section中实现像togglehead hav这样的效果尝试点击任何员工照片，它会打开一个div，一旦你点击另一张员工的照片，它就会关闭前一张照片然后打开一个新点击员工详细信息div。

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

我想达到这个结果 enter image description here

这是我尝试过的，它正在运行，但它没有像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

1 个答案:

答案 0 :(得分：0)

要分隔div，您需要更改单击框css

采取注意事项*

位置固定行为几乎与绝对相同。 

.click-box {
position:relative;
}

DEMO

相关问题
最新问题