使用jQuery隐藏边栏

Hide Sidebar with jQuery

本文关键字：隐藏 jQuery 使用      更新时间：2023-09-26

如何用这样的调用隐藏侧边栏div：

<script>
  hideSidebar();
</script>

我的侧边栏HTML:

<div class="sidebar">
  <h1>Content</h1>
  <p>Content</p>
</div>

如果Element.style.display是纯JavaScript:，则可以使用它

<div class="sidebar">
  <h1>Content</h1>
  <p>Content</p>
</div>
<script>
  function hideSidebar() {
    document.getElementsByClassName("sidebar")[0].style.display = "none";
  }
  hideSidebar();
</script>

如果您使用jQuery，您可以执行以下操作：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="sidebar">
  <h1>Content</h1>
  <p>Content</p>
</div>
<script>
  function hideSidebar() {
    $(".sidebar").hide();
  }
  hideSidebar();
</script>

使用Jquery-的隐藏功能

$('.sidebar').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<h1>Content</h1>
<p>Content</p>
</div>

最简单的方法是创建一个名为hideSideBar:的函数

<script>
  $(function(){
   hideSidebar();
  function hideSidebar(){
    $('.sidebar').hide();
  }
  })
</script>

只需将所有<script>放在结束body标记之前，即可确保JS解析器读取您的元素并准备好进行操作：

<div class="sidebar">
<h1>Content</h1>
<p>Content</p>
</div>

<script>
    function hideSidebar(){
         document.querySelector(".sidebar").style.display = "none";
    }
    hideSidebar();
</script>
</body>

或者使用DOM就绪函数（jQuery）：

<script>
    jQuery(function( $ ){ // DOM ready and $ alias secured

        function hideSidebar(){
             $(".sidebar").hide();
        }
        hideSidebar();
    });
</script>

<div class="sidebar">
   <h1>Content</h1>
   <p>Content</p>
</div>

添加脚本

<script>
$("document").ready(function(){
 $(".sidebar").css("display","none");
});
</script>
相关文章：