slideToggle方法是jQuery中用于顯示或隱藏一個元素的動畫效果,可以實現垂直滑動效果。當調用slideToggle方法時,元素會以滑動的方式顯示或隱藏,可以通過設置元素的高度來實現垂直滑動效果。示例代碼如下:
<!DOCTYPE html>
<html>
<head>
<style>
#content {
display: none;
height: 200px;
background-color: #f0f0f0;
overflow: hidden;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$("#content").slideToggle();
});
});
</script>
</head>
<body>
<button id="toggleButton">Toggle</button>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel sem eget libero lacinia tempor.
</div>
</body>
</html>
在上面的示例中,點擊按鈕會使用slideToggle方法顯示或隱藏內容區域,實現了垂直滑動效果。