简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery中slideUp 和 slideDown 的点击事件

jQuery中slideUp 和 slideDown 的点击事件

巴扎黑
巴扎黑asal
2017-06-29 11:22:411593semak imbas

这篇文章主要介绍了jQuery中slideUp 和 slideDown 的点击事件的相关资料,需要的朋友可以参考下

先贴代码，再讲详细事件

代码如下:

<!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>

重点（Tips）:

1、click 事件 按钮的选择

   在这个断码中是  “.flip”

2、节点的选择

　　在这段代码中是 “.panel”

再贴一段代码

代码如下:

<script type="text/javascript">
            $(document).ready(function(){
                $(".flip").click(function(){
                    $(".panel").slideToggle(300);
                });
            });
        </script>

.slideToggle 事件

将这个滑动效果进行了  Up 和 Down 的2中效果 都展示出来

以上内容就是关于jQuery中slideUp 和 slideDown 的详细讲解了，希望大家能够喜欢。

Atas ialah kandungan terperinci jQuery中slideUp 和 slideDown 的点击事件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery中的slideUp()、slideDown()、hide()、show()用法汇总Artikel seterusnya：jQuery.slideUp() 函数使用详解

Artikel berkaitan

Lihat lagi