Javascript 跳转加载jQuery

基本上，我在我的网站顶部有一个div，我想隐藏它，当你点击一个按钮时，它会将整个网站向下推，并显示其内容。与此非常类似（单击标题右侧的帮助中心或杨树站点）。我正在使用jquery来完成这项工作。这个脚本可以工作，但它很不稳定，因为如果关闭JS，div中的内容必须是可访问的，它必须获得高度，然后将其隐藏。我只是在寻找一种方法，使“抽屉”在页面加载时不会打开而不是关闭，相反，在你点击链接之前似乎什么都没有（就像nd.edu）。任何帮助都会很好

//快速链接滑块效果//定义变量

var$links=$（“#快速链接”）
var height=$links.height（）

//将#快速链接的高度设置为0
$links.hide（）.css（{height:0}）

这是我的html和css

        #quick_links{background:url(../images/drawer_shadow.jpg) bottom left repeat-x #F6F8F7;width:100%; padding-bottom:20px; position:relative; z-index:1;}
#quick_links ul{float:left !important;margin:0 20px 0 20px;}
#quick_links_button{float:right;background:url(../images/umflint-sprite.png) -430px -132px  no-repeat;height:24px;width:101px;text-indent:-9999px;}
<div id="quick_links">
      <div class="wrapper">
                 <h3>
                    Quicklinks
                </h3>
                <ul>
                    <li>Stuff Goes Here</li>
                </ul>

            </div><!-- End Wrapper -->
          </div><!-- End QuickLinks -->
           <a href="#quick_links" class="slide" id="quick_links_button" name="quick_links_button">Quick Links</a>
         <div id="content">
               blah blah blah
         </div>

#快速链接{背景：url（../images/drawer_shadow.jpg）左下重复-x#F6F8F7；宽度：100%；填充底部：20px；位置：相对；z索引：1；}
#快速链接{浮点：左！重要；边距：0 20px 0 20px；}
#快速链接按钮{float:right；背景：url（../images/umflint sprite.png）-430px-132px不重复；高度：24px；宽度：101px；文本缩进：-999px；}
快速链接

这里有东西

废话废话
您应该使用，而不是设置高度动画。至于在加载文档时隐藏它：

$(function(){
  $("#quick-links").hide();
});

要隐藏它，请执行以下操作：

$("#quick-links").slideDown(300);

为了证明这一点：

$("#quick-links").slideUp(300);

您应该使用而不是设置高度动画。至于在加载文档时隐藏它：

$(function(){
  $("#quick-links").hide();
});

要隐藏它，请执行以下操作：

$("#quick-links").slideDown(300);

为了证明这一点：

$("#quick-links").slideUp(300);

Jonathan的回答很好，但只有在Jquery加载后才会隐藏div。如果这对你来说还不够早，你可以这样做：

<style type="text/css">
#hiddenbox {display:none;}
</style>
<script type="text/javascript">
    // this will write the hidden box for people that have JS enabled
    document.write("<div id='hiddenbox'>stuff goes here</div>");
</script>
<noscript>
    <!-- this will write the visible box for people that have JS disabled -->
    <div id='alternatebox'>stuff goes here</div>
</noscript>


#hiddenbox{显示：无；}
//这将为启用JS的人编写隐藏框
文件。写（“这里有东西”）；
这里有东西

这将仅在此人激活JS时插入隐藏框，否则将插入可见框。
Jonathan的回答很好，但仅在加载Jquery后才会隐藏div。如果这对你来说还不够早，你可以这样做：

<style type="text/css">
#hiddenbox {display:none;}
</style>
<script type="text/javascript">
    // this will write the hidden box for people that have JS enabled
    document.write("<div id='hiddenbox'>stuff goes here</div>");
</script>
<noscript>
    <!-- this will write the visible box for people that have JS disabled -->
    <div id='alternatebox'>stuff goes here</div>
</noscript>


#hiddenbox{显示：无；}
//这将为启用JS的人编写隐藏框
文件。写（“这里有东西”）；
这里有东西

这将仅在此人有JS活动时插入隐藏框，否则将插入可见框。
那么我应该在条件语句中替换这些框，还是删除条件并使用.toggle（）触发幻灯片？如果愿意，可以使用条件。或者您可以使用
$.slideToggle（）谢谢，这正是我要找的。那么我应该在条件语句中替换它们，还是删除条件语句，然后使用.toggle（）启动幻灯片？如果愿意，可以使用条件语句。或者您可以使用
$.slideToggle（）谢谢，这正是我想要的。-1 |从OP：如果JS被关闭，div中的内容必须是可访问的是-我的意思是内容是重复的-一个div有一个ID，通过CSS在加载时将其隐藏，另一个备用框（对于no JS）有相同的内容，但是在这种情况下，ID没有CSS规则来隐藏加载时的内容，因此对于没有JS的人，它显示为可见。您尝试过代码吗？如果您不熟悉noscript标记，这里有一个解释：--我认为它不值得否决。我们可以停止使用
document.write（）吗我们已经过去了。-1 |从OP：如果JS被关闭，div中的内容必须是可访问的是--我的意思是内容是重复的--一个div有一个ID，通过CSS在加载时使其隐藏，另一个备用框（对于no JS）有相同的内容，但是在这种情况下，ID没有CSS规则来隐藏加载时的内容，因此对于没有JS的人，它显示为可见。您尝试过代码吗？如果您不熟悉noscript标记，这里有一个解释：--我认为它不值得否决。我们可以停止使用
document.write（）吗我们已经过去了这些时间。