javascript - 根据条件显示和隐藏子 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>

这里我只写class1和class2的代码。

我需要的是当我们点击父类别(类)时

(1) Show it's child category & after-class if child category not displayed

(2)Hide it's child category & after-class if it is already

如何做到这一点？

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");
            }