单击时隐藏容器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

缺少课程时，您不会将课程重新添加回该课程。

 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 2

您必须在其他情况下添加“跟随行”：

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

Answer 3

您仅在单击时删除该类。然后在语句中添加$('#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 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

使用toggle（）函数

 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');

 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>