show和hide的使用

咸鱼妹妹

于 2021-01-04 14:04:06 发布

阅读量991

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45884202/article/details/112174766

版权

show和hide的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>show和hide的使用</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <button id="sel">show/hide</button>
  
  <div id="wrap" style="display: none;">
    <span>child</span>
  </div>

  <script>
    // $('#wrap').hide()
    
    $('#sel').click(e => {
      // $('#wrap').show()

      // $('#wrap').toggle()
      
      // $('#wrap').css('display', 'block !import')
      
      // $('#wrap')[0].style.display = 'block'
      
      // 是否隐藏:is(':visible')
      // if(!$('#wrap').is(':visible')) {
        if($('#wrap').is(':hidden')) {
          // $('#wrap').show() 
          // $('#wrap').css('display', 'block')
          // 等价于原生写法
          $('#wrap')[0].style.display = 'block'
        } else {
          // $('#wrap').hide()  
          // $('#wrap').css('display', 'none')
        // 等价于原生写法
        $('#wrap')[0].style.display = 'none'
      }
      
    })
  </script>
</body>
</html>