Question

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

// Quick Links Slider Effect// Define Vars var $links = $('#quick_links'); var height = $links.height();

// Set the height of #quick_links to 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);

Answer 2

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>

只有当此人有JS活动时才会插入隐藏的框，否则会插入一个可见的框。

跳跃onload jQuery

2 个答案: