点击隐藏容器div

Question

我点击Click Me!显示#formcontainer div。

我再次点击它来隐藏它，但它并不能掩盖:-(

有人能解释为什么

演示：https://jsfiddle.net/v809wxp9/

jQuery(document).ready(function($) { 
 

 
    // Control Banner toggle on sub pages 
 
    $('#sub-page-banner .tog').click(function() { 
 
    if ($("#formcontainer").hasClass("hassent")) { 
 
     $('#formcontainer').removeClass('hassent'); 
 
     $('#topimage').slideDown(); 
 
     $('#formcontainer').css('height', '0'); 
 
    } else { 
 
     $('#formcontainer').css('height', 'auto'); 
 
    } 
 
    }); 
 

 
});

/*SUb Page Banner*/ 
 

 
#sub-page-banner { 
 
    padding: 15px; 
 
    background: #3887c2; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size: 30px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 
#sub-page-banner .tog { 
 
    margin-top: 0px !important; 
 
    width: 100%; 
 
    font-size: 13px !important; 
 
    text-align: center; 
 
} 
 
#formcontainer { 
 
    overflow: hidden; 
 
    height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="contslide"> 
 
    <div class="container-fluid" id="sub-page-banner"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-3"> 
 
      <div class="btn tog">Click me!</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-8 col-sm-12 topmain"> 
 
      <div id="theform"> 
 
      <div class="row"> 
 

 
       <div class="col-md-12"> 
 
       <h1>Hello - Test my form please :-)</h1> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div>

Answer 1

你只是删除在click.Then else语句的时候类类添加$('#formcontainer').addClass('hassent');。其回到与原来的位置。

jQuery(document).ready(function($) { 
 

 
     // Control Banner toggle on sub pages 
 
     $('#sub-page-banner .tog').click(function(){ 
 
      if ($("#formcontainer").hasClass("hassent")) { 
 
       $('#formcontainer').removeClass('hassent'); 
 
       $('#topimage').slideDown(); 
 
       $('#formcontainer').css('height', '0'); 
 
      }else{ 
 
       $('#formcontainer').addClass('hassent'); 
 
       $('#topimage').slideUp(); 
 
       $('#formcontainer').css('height', 'auto'); 
 
      } 
 
     }); 
 

 
    });

/*SUb Page Banner*/ 
 
    #sub-page-banner{ 
 
     padding:15px; 
 
     background: #3887c2; 
 
     color: #fff; 
 
     cursor: pointer; 
 
     font-size:30px; 
 
     text-transform:uppercase; 
 
     letter-spacing:3px; 
 
    } 
 

 
    #sub-page-banner .tog{ 
 
     margin-top:0px !important; 
 
     width: 100%; 
 
     font-size: 13px !important; 
 
     text-align: center; 
 
    } 
 

 
    #formcontainer{ 
 
     overflow:hidden; 
 
     height:0; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="contslide"> 
 
        <div class="container-fluid" id="sub-page-banner"> 
 
         <div class="container"> 
 
          <div class="row"> 
 
           <div class="col-md-3"> 
 
            <div class="btn tog">Click me!</div> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 

 
        <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');"> 
 
         <div class="container"> 
 
          <div class="row"> 
 
           <div class="col-lg-6 col-md-8 col-sm-12 topmain"> 
 
            <div id="theform"> 
 
             <div class="row"> 
 
               
 
               <div class="col-md-12"> 
 
                <h1>Hello - Test my form please :-)</h1> 
 
               </div> 
 
            </div> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 

 
    </div>

Answer 2

当类缺失时，您不会将类添加回来。

jQuery(document).ready(function($) { 
 

 
    // Control Banner toggle on sub pages 
 
    $('#sub-page-banner .tog').click(function() { 
 
    if ($("#formcontainer").hasClass("hassent")) { 
 
     $('#formcontainer').removeClass('hassent'); 
 
     $('#topimage').slideDown(); 
 
     $('#formcontainer').css('height', '0'); 
 
    } else { 
 
     $('#formcontainer').addClass('hassent'); 
 
     $('#formcontainer').css('height', 'auto'); 
 
    } 
 
    }); 
 

 
});

/*SUb Page Banner*/ 
 

 
#sub-page-banner { 
 
    padding: 15px; 
 
    background: #3887c2; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size: 30px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 
#sub-page-banner .tog { 
 
    margin-top: 0px !important; 
 
    width: 100%; 
 
    font-size: 13px !important; 
 
    text-align: center; 
 
} 
 
#formcontainer { 
 
    overflow: hidden; 
 
    height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="contslide"> 
 
    <div class="container-fluid" id="sub-page-banner"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-3"> 
 
      <div class="btn tog">Click me!</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-8 col-sm-12 topmain"> 
 
      <div id="theform"> 
 
      <div class="row"> 
 

 
       <div class="col-md-12"> 
 
       <h1>Hello - Test my form please :-)</h1> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div>

Answer 3

请参见下面的代码只需要ADDD $('#formcontainer').addClass('hassent');

jQuery(document).ready(function($) { 
 

 
    // Control Banner toggle on sub pages 
 
    $('#sub-page-banner .tog').click(function() { 
 
    if ($("#formcontainer").hasClass("hassent")) { 
 
     $('#formcontainer').removeClass('hassent'); 
 
     $('#topimage').slideDown(); 
 
     $('#formcontainer').css('height', '0'); 
 
    } else { 
 
$('#formcontainer').addClass('hassent'); 
 
     $('#formcontainer').css('height', 'auto'); 
 
    } 
 
    }); 
 

 
});

/*SUb Page Banner*/ 
 

 
#sub-page-banner { 
 
    padding: 15px; 
 
    background: #3887c2; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size: 30px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 
#sub-page-banner .tog { 
 
    margin-top: 0px !important; 
 
    width: 100%; 
 
    font-size: 13px !important; 
 
    text-align: center; 
 
} 
 
#formcontainer { 
 
    overflow: hidden; 
 
    height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="contslide"> 
 
    <div class="container-fluid" id="sub-page-banner"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-3"> 
 
      <div class="btn tog">Click me!</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-8 col-sm-12 topmain"> 
 
      <div id="theform"> 
 
      <div class="row"> 
 

 
       <div class="col-md-12"> 
 
       <h1>Hello - Test my form please :-)</h1> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div>

Answer 4

jQuery(document).ready(function($) { 
 

 
    // Control Banner toggle on sub pages 
 
    $('#sub-page-banner .tog').click(function() { 
 
    if ($("#formcontainer").hasClass("hassent")) { 
 
     $('#formcontainer').removeClass('hassent'); 
 
     $('#topimage').slideDown(); 
 
     $('#formcontainer').css('height', '0'); 
 
    } else { 
 
     $('#formcontainer').addClass('hassent'); 
 
     $('#formcontainer').css('height', 'auto'); 
 
    } 
 
    }); 
 

 
});

/*SUb Page Banner*/ 
 

 
#sub-page-banner { 
 
    padding: 15px; 
 
    background: #3887c2; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size: 30px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 
#sub-page-banner .tog { 
 
    margin-top: 0px !important; 
 
    width: 100%; 
 
    font-size: 13px !important; 
 
    text-align: center; 
 
} 
 
#formcontainer { 
 
    overflow: hidden; 
 
    height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="contslide"> 
 
    <div class="container-fluid" id="sub-page-banner"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-3"> 
 
      <div class="btn tog">Click me!</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-8 col-sm-12 topmain"> 
 
      <div id="theform"> 
 
      <div class="row"> 
 

 
       <div class="col-md-12"> 
 
       <h1>Hello - Test my form please :-)</h1> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div>

添加删除类

Answer 5

使用翻转（）函数

jQuery(document).ready(function($) { 
 

 
    // Control Banner toggle on sub pages 
 
    $('#sub-page-banner .tog').click(function() { 
 
    //if ($("#formcontainer").hasClass("hassent")) { 
 
    // $('#formcontainer').removeClass('hassent'); 
 
    // $('#topimage').slideDown(); 
 
    // $('#formcontainer').css('height', '0'); 
 
    //} else { 
 
    // $('#formcontainer').css('height', 'auto'); 
 
    // } 
 
    $('#formcontainer').toggle(); 
 
    }); 
 

 
});

/*SUb Page Banner*/ 
 

 
#sub-page-banner { 
 
    padding: 15px; 
 
    background: #3887c2; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size: 30px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 
#sub-page-banner .tog { 
 
    margin-top: 0px !important; 
 
    width: 100%; 
 
    font-size: 13px !important; 
 
    text-align: center; 
 
} 
 
#formcontainer { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="contslide"> 
 
    <div class="container-fluid" id="sub-page-banner"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-3"> 
 
      <div class="btn tog">Click me!</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-8 col-sm-12 topmain"> 
 
      <div id="theform"> 
 
      <div class="row"> 
 

 
       <div class="col-md-12"> 
 
       <h1>Hello - Test my form please :-)</h1> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div>

Answer 6

您必须添加下面的行中的其他条件：

$("#formcontainer").addClass('hassent');