在点击div折叠所有其他div

Question

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

我想制作动画，当用户点击他们的div时，其他div会在点击的潜水下折叠。

是否有任何代码可以做到这一点，不管代码是做什么的？

也是代码将工作，如果表中的div？

Answer 1

HTML

<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> 

JS

$(document).ready(function(){ 
    $('.forHide').on('click', function(){ 
    $('.forHide').addClass('hidden'); // hides all 
    $(this).removeClass('hidden'); // current hide deleted 
    }); 
}); 

Answer 2

你必须添加任何常数类到所有股利。例如，查看下面的代码示例。

<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 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>