根據條件顯示和隱藏子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）如果未顯示子類別，則顯示子類別和課后類別

（2）如果已經隱藏了子類別和課后類別

這個怎么做 ？

Answer 1

這是解決方案的jsfiddle：

演示

您可以這樣寫來顯示和隱藏。

編輯：要在課后隱藏，然后將代碼修改為此

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

這是解決方案。 添加給定的jQuery。

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

工作演示 ！

Answer 3

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