条件ごとに子divを表示/非表示

Question

このコードは、親カテゴリをクリックすると子カテゴリを表示するために作成したものです。そして、それは良い仕事。ここで

$(function(){ 
 
    $(".class1-parrent").on("click",function(){ 
 
    $(".after-class").css("display","none"); 
 
    $('.class1-child').appendTo('.after-4'); 
 
    $(".after-4").css("display","flex"); 
 
    $(".common-child-class").css("display","none"); 
 
    $(".class1-child").css("display","block"); 
 
    }); 
 

 
    $(".class2-parrent").on("click",function(){ 
 
    $(".after-class").css("display","none"); 
 
    $('.class2-child').appendTo('.after-4'); 
 
    $(".after-4").css("display","flex"); 
 
    $(".common-child-class").css("display","none"); 
 
    $(".class2-child").css("display","block"); 
 
    }); 
 

 

 
});

.after-4, .after-5 { 
 
    border: 1px solid black; 
 
    display:none; 
 
    width:100%; 
 
} 
 
.common-parrent-class { 
 
    border:1px solid black; 
 
    margin:2px; 
 
    float:left; 
 
    width:20%; 
 
    cursor:pointer; 
 
} 
 
.main, .sub-category { 
 
    display: inline-table; 
 
    padding:22px; 
 
    border:1px solid black; 
 
} 
 
.sub-category { 
 
    margin-top:10%; 
 
    display:none; 
 
    width:100%; 
 
} 
 
.common-child-class { 
 
    display:none; 
 
    width:100%; 
 
} 
 
.inner { 
 
    float:left; 
 
    width:24%; 
 
    margin:2px; 
 
} 
 
@media screen and (max-width: 299px) and (min-width:200px){ 
 
    .common-parrent-class, .inner { 
 
    width:60%; 
 
    } 
 
} 
 
@media screen and (max-width: 420px) and (min-width:300px){ 
 
    .common-parrent-class, .inner { 
 
    width:40%; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6 main"> 
 

 
     <div class="main-category"> 
 
     <div class="class1-parrent common-parrent-class">Class1</div> 
 
     <div class="class2-parrent common-parrent-class">Class2</div> 
 
     <div class="class3-parrent common-parrent-class">Class3</div> 
 
     <div class="class4-parrent common-parrent-class">Class4</div> 
 
     <div class="after-4 after-class"></div> 
 
     <div class="class5-parrent common-parrent-class">Class5</div> 
 
     <div class="after-5 after-class"></div> 
 

 
     </div> 
 

 
     <div class="sub-category"> 
 

 
     <div class="class1-child common-child-class"> 
 
      <div class="class1-child-inner inner">Class 1</div> 
 
      <div class="class1-child-inner inner">Class 1</div> 
 
      <div class="class1-child-inner inner">Class 1</div> 
 
      <div class="class1-child-inner inner">Class 1</div> 
 
     </div> 
 

 
     <div class="class2-child common-child-class"> 
 
      <div class="class2-child-inner inner">Class 2</div> 
 
      <div class="class2-child-inner inner">Class 2</div> 
 
      <div class="class2-child-inner inner">Class 2</div> 
 
      <div class="class2-child-inner inner">Class 2</div> 
 
     </div> 
 

 

 

 
     </div> 
 

 

 

 

 

 
    </div> 
 
    </div> 
 
</div>

私はクラス1とクラス2のためのコードを記述します。私は必要なもの

たちは

その後、親カテゴリ（クラス）をクリックしたとき（1）子カテゴリは、（2）それは子供の隠す

を表示されていない 場合、それは後にクラスの子カテゴリ&のショーでありますカテゴリ&アフタークラス既にある場合

どのようにするのですか？ここで

Answer 1

は解決のためにjsfiddleです：

Demo

あなたが表示され、非表示にするには、次のように書くことができます。

編集：この

if(status == 'none'){ 
      $('.'+$child).appendTo('.after-4'); 
      $(".after-4").css("display","flex"); 
      $(".common-child-class").css("display","none"); 
      $('.'+$child).css("display","block"); 
      } 
      if(status == 'block'){ 
       $(".after-4").css("display","none"); 
      } 

Answer 2

toggle()を使用するようにコードを変更し、その後、クラスの後に非表示にするには、私は基本的なサンプルを行っています。スタイリングとアライメントのパートを行うことができます。ここで

$(function(){ 
 
     
 
     
 
     
 
     
 
     
 
     $(".class1-parrent").on("click",function(){ 
 
      //$(".after-class").css("display","none"); 
 
      //$('.class1-child').appendTo('.after-4'); 
 
      //$(".after-4").css("display","flex"); 
 
      //$(".common-child-class").css("display","none"); 
 
      //$(".class1-child").css("display","block"); 
 
     //$('.class1-child common-child-class').toggle('show'); 
 
     //$(".common-child-class").css("display","none"); 
 
      $(".class1-child").toggle('hide') 
 
     }); 
 
     
 
     $(".class2-parrent").on("click",function(){ 
 
      //$(".after-class").css("display","none"); 
 
      //$('.class2-child').appendTo('.after-4'); 
 
      //$(".after-4").css("display","flex"); 
 
      //$(".common-child-class").css("display","none"); 
 
      //$(".class2-child").css("display","block"); 
 
      
 
     $(".class2-child").toggle('hide') 
 
     }); 
 
     
 
     
 
    });

.after-4, .after-5{ 
 
      border: 1px solid black; 
 
      display:none; 
 
      width:100%; 
 
     } 
 
     
 
     
 
     .common-parrent-class{ 
 
      border:1px solid black; 
 
      margin:2px; 
 
      float:left; 
 
      width:20%; 
 
      cursor:pointer; 
 
      
 
     } 
 
     
 
     .main, .sub-category{ 
 
      display: inline-table; 
 
      padding:22px; 
 
      border:1px solid black; 
 
     } 
 
     
 
     .sub-category{ 
 
      margin-top:10%; 
 
      display:none; 
 
      width:100%; 
 
     } 
 
     
 
     .common-child-class{ 
 
      display:none; 
 
      width:100%; 
 
     } 
 
     
 
     .inner{ 
 
      float:left; 
 
      width:24%; 
 
      margin:2px; 
 
     } 
 
     @media screen and (max-width: 299px) and (min-width:200px) 
 
      { 
 
       
 
       .common-parrent-class, .inner{ 
 
        
 
        width:60%; 
 
       } 
 
       
 
       
 
      } 
 
     
 
      
 
       @media screen and (max-width: 420px) and (min-width:300px) 
 
      { 
 
       
 
       .common-parrent-class, .inner{ 
 
        
 
        width:40%; 
 
       } 
 
       
 
       
 
      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-6 main"> 
 
      
 
     <div class="main-category"> 
 
      <div class="class1-parrent common-parrent-class">Class1</div> 
 
      <div class="class1-child common-child-class" > 
 
       <div class="class1-child-inner inner">Class 1</div> 
 
       <div class="class1-child-inner inner">Class 1</div> 
 
       <div class="class1-child-inner inner">Class 1</div> 
 
       <div class="class1-child-inner inner">Class 1</div> 
 
      </div> 
 
      <div class="class2-parrent common-parrent-class">Class2</div> 
 
      <div class="class2-child common-child-class"> 
 
       <div class="class2-child-inner inner">Class 2</div> 
 
       <div class="class2-child-inner inner">Class 2</div> 
 
       <div class="class2-child-inner inner">Class 2</div> 
 
       <div class="class2-child-inner inner">Class 2</div> 
 
      </div> 
 
      <div class="class3-parrent common-parrent-class">Class3</div> 
 
      <div class="class4-parrent common-parrent-class">Class4</div> 
 
      <div class="after-4 after-class"></div> 
 
      <div class="class5-parrent common-parrent-class">Class5</div> 
 
      <div class="after-5 after-class"></div> 
 
      
 
     </div> 
 
      
 
      <div class="sub-category"> 
 
       
 
       
 
      
 
       
 
     
 
       
 
       
 
      </div> 
 
      
 
      
 
      
 
      
 

 
    </div> 
 
    </div> 
 
</div>

Answer 3

ソリューションです。指定されたjqueryを追加します。

$(".class3-parrent").on("click",function(e){ 
      $(".common-child-class").hide(); 
      $(".after-4.after-class").hide(); 
     }); 

作業DEMO !!!