jQuery : How to keep a Top Sliding Panel in CLOSED state on page load

Question

您好，我正在编写一个小的 jQuery 脚本，它将切换网站上隐藏的顶部面板。

我的脚本是这样的:

// Expand Panel
$("#open").click(function(){
    $("div#top-panel").slideDown("slow");

}); 
// Collapse Panel
$("#close").click(function(){
    $("div#top-panel").slideUp("slow"); 
});     
// Switch buttons from "Open" to "Close" on click
$("#toppaneltoggle a").click(function () {
    $("#toppaneltoggle a").toggle();
});     

HTML 是这样的:

<div id="top-panel" class="one">
    <div class="wrap">
            <div class="widget">
                <jdoc:include type="modules" name="top-panel" style="xhtml" />
            </div>
    </div>
</div>
<div class="tab">
    <li id="toppaneltoggle">
    <a id="open" class="open" href="#">Checkout Special Offers</a>
    <a id="close" style="display: none;" class="close" href="#">Close This Panel</a>
    </li>
</div>

当前在页面加载时，面板状态为打开，但是切换功能在单击其关闭的选项卡时工作正常。我的问题是，我希望此面板在页面加载时处于 CLOSE 状态，并且仅在单击选项卡时才打开。

我如何实现这一目标？

请帮忙。

Answer 1

不会

<div id="top-panel" class="one" style="display: none;">

工作？