javascript - Jquery Toggle Hide / Show Nav Element

Question

Josh MeinがJavascriptの非表示/表示メニューを手伝ってくれた後、メニューは100％動作していますが、ページが読み込まれたときにメニューが「非表示状態」になっていることを望んでいます。jsFiddleリンクは次のとおりです。http：//jsfiddle.net/8y7Sr/3/ ... ページをロードするとメニューが表示され、[メニューの切り替え]をクリックするとナビゲーションが非表示になります。それは完璧ですが、ページをロードしたときにメニューがすでに非表示状態になっていて、[メニューの切り替え]をクリックしたときにナビゲーションが上にスライドするようにするにはどうすればよいですか？Joshは、これを正しく行うには、コメントアウトしてdivIDにstickyfooter$("#stickyfooter").show();を追加する必要があると述べました。class="show_hide"私はいじり回っていますが、それを機能させることができないようです。私はおそらく何か間違ったことをしたことがありますが、誰かがジョシュの意味を明確にすることができますか？t？前もって感謝します ：）

Answer 1

既存のコードに最小限の変更を加えるには、プログラムで既存のクリックイベントをすぐにトリガーします。

$('.show_hide').click(function(){
   // your existing function code here

}).click();    // <---- add this bit

デモ： http： //jsfiddle.net/8y7Sr/8/

または、コードの最初の行を削除します。

$("#stickyfooter").show();        // <--- delete this line

#sticky_footer_titleクラスを次のように変更します。

bottom: 0px; 

そして、#stickyfooterクラスを次のように変更します。

display: none;

デモ： http： //jsfiddle.net/8y7Sr/11/

（余談ですが、idと「stickyfooter」と呼ばれるクラスの両方を持つことは、ちょっと混乱します。私にとっては、含まれているdivがid="stickyfootercontainer"代わりに持っていた方が理にかなっていclass="stickyfooter"ます。）

Answer 2

もう少し単純化

HTML

<div class="stickyfooter">
    <div id="sticky_footer_title">
        <a href="#">Toggle Menu &#x25BC;</a>
    </div>
    <div id="stickyfooter">
        <ul id="footer_menu">
            <li class="imgmenu"><a href="#"></a></li>
            <li><a href="#intro">Intro</a></li>
            <li><a href="#photos">Photos</a></li>
        </ul>
    </div>
</div>

JAVASCRIPT

var showMenu = $("#stickyfooter");
var menuTrigger = $("#sticky_footer_title");

menuTrigger.find("a").toggle(
    function() {
        $(this).parent().animate({ bottom: '0px' }, "slow");
        showMenu.slideToggle("slow");
    },
    function() {
        $(this).parent().animate({ bottom: '40px' }, "slow");
        showMenu.slideToggle("slow");
    }
);

例： http： //jsfiddle.net/7YMPK/