Question

我在水平线上有一个在另一个旁边的7个div。

我想制作动画，当用户点击它们的div时，其他div将在点击的潜水下崩溃。

是否有任何代码可以执行此操作，无论代码是什么？

如果表格中的div，代码也会起作用吗？

Answer 1

你必须为所有div添加任何常量类。例如，请查看以下代码示例。

 <div class="all-div">first Div</div>
    <div class="all-div">second Div</div>
    <div class="all-div">third Div</div>
    <div class="all-div">fourth Div</div>
    <div class="all-div">fifth Div</div>
    <div class="all-div">sixth Div</div>
    <script>$(document).ready(function(){
        $(".all-div").on("click",function(){
    var current=this;
    $(".all-div").each(function(key,val){
          if($(val)!=$(current))$(val).hide();
          else $(val).show();
      });
    });
    });</script>

这是示例代码。您可以根据自己的要求进行修改。

Answer 2

HTML

JS

<style>
  .hidden {
    display: none;
  }
</style>
<div class="forHide">1</div>
<div class="forHide">2</div>
<div class="forHide">3</div>
<div class="forHide">4</div>

Answer 3

你对横向div的问题，以及用动画折叠的能力看起来非常接近手风琴的功能。

我已经使用jQuery插件zAccordion创建了这个：https://jsfiddle.net/bc2x2e1s/3/

JS：

$(document).ready(function() {
  $("#boxes").zAccordion({
    width: 700,
    height: 310,
    tabWidth: 100,
    invert: true
  });
});

CSS：

#boxes div {
  background-color: #fff;
  border: 1px solid #ccc;
}

HTML：

<div id="boxes">
  <div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus es.
  </div>
  <div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus es.
  </div>
  <div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus es.
  </div>
</div>

点击div折叠所有其他div

3 个答案: