cari

Rumah >hujung hadapan web >tutorial js >浅析jquery中的toggle与slideToggle的区别

浅析jquery中的toggle与slideToggle的区别

巴扎黑
巴扎黑asal
2017-06-30 11:16:531518semak imbas

 jQuery中的

toggle和slideToggle 方法，都可以实现对一个元素的显示和隐藏。强大啊~

区别是：

toggle：动态效果为从右至左。横向动作。

slideToggle：动态效果从下至上。竖向动作。

so，比如想实现一个树由下至上收缩的动态效果，就使用slideToggle就ok了。

此外，toggle和slideToggle 还有一些参数可以设置，具体看jQuery的API就可以了~

 

toggle的用法：

<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></SCRIPT>
<SCRIPT LANGUAGE="
JavaScript
">
$(function(){
 $("#z").toggle(
    function(){
     alert(1);
    },
    function(){
     alert(2);
    },
    function(){
     alert(3);
    }
 );
 $("#x").click(function(){
  $("#z").toggle(
    function(){
     alert(1);
    },
    function(){
     alert(2);
    },
    function(){
     alert(3);
    }
  );
 });
})
</SCRIPT>
<p style="
width
:100px; 
height
:100px; 
background-color
:red;" id="z"></p>
<p style="width:100px; height:100px; background-color:blue;" id="x"></p>

 

slideToggle的用法：

 <title></title>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <style type="text/css">
        .imgclass
        {
            width: 300px;
            height: 300px;
            border: solid 1px red;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $(&#39;#Button1&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).slideUp(2000);
            });
            $(&#39;#Button2&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).slideDown(2000);
            });
            $(&#39;#Button3&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).slideToggle(2000);
            })
        })
    </script>
</head>
<body>
    <p>
        <p>
            <input id="Button1" type="button" value="上拉" /><input id="Button2" type="button"
                value="下拉" /><input id="Button3" type="button" value="自动上拉下拉" /></p>
        <p>
            <img alt="" src="images/1.jpg" class="imgclass" /></p>
    </p>
</body>

Atas ialah kandungan terperinci 浅析jquery中的toggle与slideToggle的区别. 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隐藏、显示事件and提示callback、淡入淡出fadeToggle、滑入滑出slideToggle、动画animate停止动画stopArtikel seterusnya：jQuery动画animate方法使用介绍

Artikel berkaitan

Lihat lagi