Home > Article > Web Front-end > Click events of slideUp and slideDown in jQuery
Click events of slideUp and slideDown in jQuery
- 巴扎黑Original
- 2017-06-29 11:22:411537browse
This article mainly introduces the relevant information about the click events of slideUp and slideDown in jQuery. Friends in need can refer to it
Post the code first, and then talk about the detailed events
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js"></script>
</head>
<style type="text/css">
p.panel,p.flip
{
margin:0px;
padding
:5px;
text-align
:center;
background
:#e5eecc;
border:solid 1px #c3c3c3;
}
p.panel
{
height:120px;
}
</style>
<body>
<p class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</p>
<p class="flip">请点击这里</p>
<script type="text/
javascript
">
$(
document
).ready(function(){
$(".flip").click(function(){
$(".panel").slideUp(300);
});
});
</script>
</body>
</html>Key points (Tips):
1. Selection of click event button
In this broken code, it is ".flip"
2. Node selection
In this code it is ".panel"
Post another piece of code
The code is as follows:
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle(300);
});
});
</script>.slideToggle event
Execute this sliding effect and display both Up and Down effects
The above content is a detailed explanation of slideUp and slideDown in jQuery. I hope you will like it.
The above is the detailed content of Click events of slideUp and slideDown in jQuery. For more information, please follow other related articles on the PHP Chinese website!