增加我的橫幅的高度

Question

如何增加橫幅的高度點擊 再次點擊後，它應該進入更少的模式。

Answer 1

您可以製作.sqBandisplay:none;並在jQuery中使用show()和hide()，或者使用toggle()。

$(document).ready(function(){ 
 
    $('.moreBan').click(function(){ 
 
    $('.sqBan').toggleClass('expand'); 
 
    }); 
 
});

.sqBan {height:50px;background:indianred;transition:height .3s linear;} 
 
.sqBan.expand {height:250px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='moreBan'>Click</div> 
 
<div class='sqBan'>Some information here</div>

Answer 2

定義一個CSS類設置較大的高度，然後使用toggleClass()來打開和關閉它。試試這個：

$('.moreBan').click(function() { 
 
    $('.sqBan').toggleClass('large'); 
 
});

.sqBan { 
 
    background-color: #C00; 
 
} 
 
.large { 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="sqBan">sqBan...</div> 
 
<div class="moreBan">Click me</div>