divのクリックで他のdivをすべて折りたたむ

Question

私は水平線で他の横に7つのdivsを持っています。

私はアニメーションを作って、ユーザーが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の水平divタグと

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

Answer 2

すべての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 3

ご質問、およびアニメーションを崩壊させる能力は、アコーディオンの機能に非常に近い見えます。

は、私はこれを作成する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>