首页 > 其他 > 详细

display: none; 与 jq show方法之间的联系

时间:2019-04-02 17:31:05      阅读:133      评论:0      收藏:0      [点我收藏+]

1. 定义四种常用隐藏元素的方式,然后调用  jq 的 show 方法显示,观察各原先隐藏元素的   display   表现

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul,li{
      border: 1px solid red;
      color: red;
    }
    .hide{
      display: none;
    }
    .inline-block{
      display: inline-block;
    }
    .wrap li:nth-child(4){
      display: none;
    }
  </style>
</head>
<body>
  
  <ul class="wrap">
    <li style="display: none;">style="display: none;"</li>
    <li class="hide">class="hide" +  display:list-item;</li>
    <li class="hide inline-block">class="hide" +  display:inline-block;</li>
    <li>display:list-item;</li>
  </ul>
  <script src="jquery-1.9.1.min.js"></script>
  <script>
    $(.wrap li).show();
  </script>
</body>
</html>
View Code

2. 相关文章

jquery的show/hide/toggle详解

display: none; 与 jq show方法之间的联系

原文:https://www.cnblogs.com/justSmile2/p/10643851.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!