首页 > 代码库 > show(),hide()和display在一起的用法

show(),hide()和display在一起的用法

2024-09-07 13:28:25   220人阅读

<!DOCTYPE html>
<html>
<head>
    <title>锋利的jQuery</title>
    <script src="http://www.mamicode.com/jquery-3.1.1.js"></script>
    <script>
        $(function(){
            $(‘#panel h5.head‘).bind(‘click‘,function(){
                var $content = $(this).next(); 
　　　　　　　　  if($content.is(‘:visible‘)){
                    $content.hide();
                }else{
                    $content.show();
                }
            });
        });
    </script>
    <style type="text/css">
        h5{
            width: 200px;
            border: 1px solid #000;
            background-color: #ccc;
        }
        .content{
            display: none;
        }
    </style>
</head>
<body>
    <div id="panel">
        <h5 class="head">什么是jQuery</h5>
        <div class="content">
            这是一段话，我显示时点击“什么是jQuery”我会消失，我消失时点击“什么是jQuery”我会显现
        </div>
    </div>
</body>
</html>

 

show()和hide()是jQuery中最基本的动画用法。

在HTML文档中，为一个元素调用hide()方法，会将该元素的display样式改为"none"(注意：不能与visibility:visible/hidden在一起用)

$(‘element‘).hide();就相当于CSS中的display:none;

相反$(‘element‘).show();就相当于CSS中的display:block;

而可见性 过滤器:visible / :hide也与show(),hide()在一起用

show(),hide()和display在一起的用法


联系
我们