javascript - 跳转 Onload jQuery

Question

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

//快速链接 slider 效果//定义变量 var $links = $('#quick_links'); var height = $links.height();

//设置#quick_links的高度为0
$links.hide().css({height: 0});

// When slide is click kick of the function
$(".slide").click(function(){
    // If its visible aniamate to 0
    if($links.is(":visible")){
        $links.animate({height: "0"}, {duration: 300, complete: function(){
            $links.hide();
        }
        });
    }
    // Else animate the height down
    else {
        $links.show().animate({height : height}, {duration: 300});
    }
    return false;
});

这是我的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>

Answer 1

你应该使用 $.slideDown()而不是动画到高度。至于在文档加载时隐藏它:

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

隐藏它:

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

并显示它:

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