我點擊Click Me!
顯示#formcontainer
div。點擊隱藏容器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>
剛剛殺青OP的代碼並不是一個很好的答案。試着解釋或詳細說明他做錯了什麼,以及你改進或糾正了什麼。 – Rimble