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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了show(),hide()和display在一起的用法相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <title>锋利的jQuery</title>
    <script src="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在一起的用法的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Jquery 中将 delay() 与 show() 和 hide() 一起使用

执行完JQuery hide()/show() @medio display属性失效

javascript 如何实现jquery中hide(),show()的功能？

jQuery中的show()和hide()fadeIn()和fadeOut()slideDown()和slideUp用法

jquery动画

jQuery——动画