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>

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

我如何实现这一目标？

请帮助。

Answer 1

岂不

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

工作？

Answer 2

我会在你的document.ready：

之后作为第一个声明

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

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

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

#top-panel { display: hidden }

Answer 3

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

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

如果你使用hide，你需要在slideDown（）;

之前调用show（）

jQuery：如何在页面加载时将顶部滑动面板保持在CLOSED状态

3 个答案: