jQuery: как сохранить верхнюю скользящую панель в закрытом состоянии при загрузке страницы - PullRequest
Новая
       30

jQuery: как сохранить верхнюю скользящую панель в закрытом состоянии при загрузке страницы

1 голос
/ 24 января 2011

Привет! Я пишу небольшой скрипт 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 при загрузке страницы, и она должна открываться только при нажатии на вкладку.

Как мне этого добиться?

Пожалуйста, помогите.

Ответы [ 3 ]

3 голосов
/ 24 января 2011

Не будет 

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

работать?

1 голос
/ 24 января 2011

Я бы просто сделал это в качестве первого утверждения после вашего документа.также сделайте это в своем CSS: 

#top-panel { display: hidden }
0 голосов
/ 24 января 2011

Не используйте hide () или display: none;(это то же самое) вместо этого используйте slideUp через 0 миллисекунд при запуске. 

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

если вы используете hide, вам нужно будет вызвать show () перед slideDown ();

...