1

嗨，我正在编写一个小的 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>

当前在页面加载时，面板状态为OPEN，但是在单击它关闭的选项卡时切换可以正常工作。我的问题是我希望此面板在页面加载时处于关闭状态，并且它应该仅在单击选项卡时打开。

我该如何做到这一点？

请帮忙。

4

3 回答 3

4

不会

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

工作？

于 2011-01-24T02:31:57.200 回答
1

我会在您的 document.ready 之后将其作为第一个声明：

$("div#top-panel").hide();

这只会隐藏面板，直到第一次点击发生。

否则，您也可以在 CSS 中执行此操作：

#top-panel { display: hidden }
于 2011-01-24T02:32:51.520 回答
0

不要使用 hide() 或 display:none; （这些是相同的）而不是在启动时在 0 毫秒内使用 slideUp。

$(function() {
   $("div#top-panel").slideUp(0);
});

如果你使用 hide，你需要在 slideDown() 之前调用 show()；

于 2011-01-24T02:39:58.497 回答