When we read a long text, we usually click the expand or collapse button. The effect obviously helps improve the user experience. Then use jquery to achieve the click expand and shrink effect, and to achieve the expand and hide effect in the up and down direction, you can use the slideUp() and slideDown() methods in jQuery to achieve it.
Now we will introduce to you the jquery method to achieve the click expand and shrink effect based on specific code examples.
The code example is as follows:
<!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>In the above code, we created two divs, box and box-inner containing text. When we click the close and expand buttons, they will be called respectively. slideUp() and slideDown() methods.
slideUp()The method hides the selected element by using the sliding effect, if the element is already displayed.
slideDown() method displays hidden selected elements by using the sliding effect.
The final effect is as follows:
Note: slideDown() is suitable for elements hidden through the jQuery method, or in CSS Declare display:none to hide elements (does not apply to elements hidden via visibility:hidden).
This article is about the specific method of jquery to achieve the click expand and shrink effect. It is very simple. I hope it will be helpful to friends in need!
The above is the detailed content of How to use jquery to achieve click expand and shrink effect. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
SublimeText3 Linux new version
SublimeText3 Linux latest version
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
WebStorm Mac version
Useful JavaScript development tools
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
