如何用jquery實現點擊展開收縮效果
- 藏色散人原創
- 2018-12-17 14:12:0712284瀏覽
當我們在閱讀較長的文字時，通常會有點擊展開或收起的按鈕，這種效果顯然有助於提高使用者體驗。那麼用jquery實現點擊展開收縮效果，並且是上下方向實現展開隱藏效果，就可以使用jQuery中slideUp()和slideDown()方法來實現。
下面我們就結合具體的程式碼範例，介紹給大家jquery實作點擊展開縮效果的方法。
程式碼範例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery实现点击展开收缩效果示例</title>
<style type="text/css">
.box{
width: 400px;
background: #f0e68c;
border: 1px solid #a29415;
}
.box-inner{
padding: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slide-up").click(function(){
$(".box").slideUp();
});
$(".slide-down").click(function(){
$(".box").slideDown();
});
});
</script>
</head>
<body>
<button type="button" class="slide-up">关闭</button>
<button type="button" class="slide-down">展开</button>
<hr>
<div class="box">
<div class="box-inner">新浪娱乐讯 据台湾媒体报道，2018MAMA香港场14日晚间7点盛大展开颁奖典礼，嘻哈、性感、抒情各种团体
合作的舞台表演精彩绝伦，《ETtoday》全程独家直播典礼现场，为观众快速整理8大看点，从防弹RM流利的英文演讲开场，到最后防弹内
心告白曾想解散，全场零冷场。</div>
</div>
</body>
</html>在上述程式碼中，我們建立了兩個div，box和包含文字的box-inner，當我們點擊關閉、展開按鈕時，就會分別調用slideUp()和slideDown()方法。
slideUp()方法透過使用滑動效果，隱藏被選元素，如果元素已顯示出來的話。
slideDown()方法透過使用滑動效果，顯示隱藏的被選元素。
最終效果如下圖：
註：slideDown() 適用於透過jQuery 方法隱藏的元素，或在CSS 中聲明display:none 隱藏的元素（不適用於透過visibility:hidden 隱藏的元素）。
這篇文章就是關於jquery實現點擊展開收縮效果的具體方法介紹，非常簡單，希望對需要的朋友有所幫助！
以上是如何用jquery實現點擊展開收縮效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn