一、实现隐藏效果

1.jQuery方式

1-1隐藏(hide)

<script src="libs/jquery-3.6.0.js"></script>  
        <div>hello world</div>
    <button id="btn">按钮</button>
    <script>
        $("#btn").click(function(){
            $("div").hide(3000)
        })
    </script>

1-2隐藏切换(show)

  <div>hello world</div>
  <button id="btn">按钮</button>  
  <script>
      $("#btn").click(function(){
        //   判断元素是否隐藏
          var isShow = $("div").is(":visible");
          console.log(isShow)
          if(isShow){
              $("div").hide(1000)
          }else{
              $("div").show(1000)
          }
      })
  </script>

1-3toggle(hide和show 融合)

    <div>hello world</div>
    <button id="btn">按钮</button>
    <script>
        $("#btn").click(function(){
            $("div").toggle(1000)
        })
    </script>

原生方式（js）

  <div id="div" style="display: block;">hello world</div>  
  <button id="btn">按钮</button>
  <script>
      var div = document.getElementById("div");
      var btn = document.getElementById("btn");
      btn.onclick = function(){
          if(div.style.display=="block"){
              div.style.display = "none"
          }else{
              div.style.display = "block"
          }
      }
  </script>