显示与隐藏切换toggle方法

最新推荐文章于 2022-10-06 17:38:34 发布

java_zhaoyanli

最新推荐文章于 2022-10-06 17:38:34 发布

阅读量1w

点赞数 1

分类专栏： myWork--

myWork-- 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换，通常情况是需要先判断元素的display状态，然后调用其对应的处理方法。比如显示的元素，那么就要调用hide，反之亦然。对于这样的操作行为，jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素

基本的操作：toggle();

这是最基本的操作，处理元素显示或者隐藏，因为不带参数，所以没有动画。通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。

如果元素是最初显示，它会被隐藏
如果隐藏的，它会显示出来

display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline，然后是隐藏和显示，这个元素将再次显示inline

提供参数：.toggle( [duration ] [, complete ] )

同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会发生显示/隐藏的改变，在改变的过程中会把元素的高、宽、不透明度进行一系列动画。这个元素其实就是show与hide的方法

直接定位：.toggle(display)

直接提供一个参数，指定要改变的元素的最终效果

其实就是确定是使用show还是hide方法

if ( display === true ) {
  $( "elem" ).show();
} else if ( display === false ) {
  $( "elem" ).hide();
}

toggle方法就是show与hide的相互切换的一个快捷方法:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    div {
        width: 500px;
        height: 50px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left {
        background: #bbffaa;
    }
    
    .right {
        background: yellow;
        display: none;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>通过toggle切换显示与隐藏</h2>
    <div class="left">显示到隐藏</div>
    <div class="right">隐藏到显示</div>
    <button>直接show-hide动画</button>
    <button>直接hide-show动画</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        $(".left").toggle(3000)
    });
    </script>

    <script type="text/javascript">
    $("button:last").click(function() {
        $(".right").toggle(3000)
    });
    </script>

</body>

</html>

java_zhaoyanli

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
显示与隐藏切换toggle方法

show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换，通常情况是需要先判断元素的display状态，然后调用其对应的处理方法。比如显示的元素，那么就要调用hide，反之亦然。对于这样的操作行为，jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素基本的操作：toggle();这是最基本的操作，处理元素显示或者隐藏，因为不带参数，所以没有动画。通过改
复制链接

扫一扫