根据条件显示和隐藏子div

时间：2016-12-07 07:07:08

标签： javascript jquery css css3 jquery-ui

我编写的代码用于在单击父类别时显示子类别。它运作良好。

＆＃13;
＆＃13; 
$(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");
  });


});
＆＃13; 
.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%;
  }  
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

当我们点击父类别（类）然后

时，我需要的是什么
  

（1）展示它的儿童类别＆amp;课后如果没有儿童类别   显示

     

（2）隐藏它的子类别＆amp;课后如果已经

怎么做？

3 个答案:

答案 0 :(得分：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");
            }

答案 1 :(得分：1)

这是解决方案。添加给定的jquery。

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

工作DEMO !!!

答案 2 :(得分：0)

使用toggle()，我做了一个基本的样本。你可以做造型和对齐部分。

＆＃13;
＆＃13; 
$(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')
      });
       
       
  });
＆＃13; 
.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%;
                }  
                
                
            }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题