码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-03-08 17:45:47      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:src   cti   doctype   doc   tle   基本   方法   bind   可见性   

<!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在一起的用法

标签:src   cti   doctype   doc   tle   基本   方法   bind   可见性   

原文地址:http://www.cnblogs.com/52fe/p/6520451.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!