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ですが、閉じるタブをクリックするとトグルは正常に機能します。私の問題は、ページの読み込み時にこのパネルをCLOSE状態にし、タブをクリックしたときにのみ開くようにすることです。

どうすればそれを達成できますか？

親切に助けてください。

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 に答える