如何用jquery實現點擊展開收縮效果-html知識-PHP中文網

首頁

每日程式設計

html知識

如何用jquery實現點擊展開收縮效果

藏色散人

Dec 17, 2018 pm 02:12 PM

當我們在閱讀較長的文字時，通常會有點擊展開或收起的按鈕，這種效果顯然有助於提高使用者體驗。那麼用jquery實現點擊展開收縮效果，並且是上下方向實現展開隱藏效果，就可以使用jQuery中slideUp()和slideDown()方法來實現。

如何用jquery實現點擊展開收縮效果

下面我們就結合具體的程式碼範例，介紹給大家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()方法透過使用滑動效果，顯示隱藏的被選元素。

最終效果如下圖：

如何用jquery實現點擊展開收縮效果