Jquery切换隐藏/显示导航元素

Question

经过Josh Mein的Javascript隐藏/显示菜单的一些帮助后，菜单正在100％工作，虽然我想在页面加载时，菜单处于“隐藏状态”。这是jsFiddle链接：http://jsfiddle.net/8y7Sr/3/ ...当您加载页面时，菜单显示，当您单击“切换菜单”时，它将隐藏导航。这是完美的但是我怎样才能使它在加载页面时，菜单已经处于隐藏状态，当你点击“切换菜单”时，导航器会向上滑动？ Josh提到，要做到这一点，我必须发表评论$("#stickyfooter").show();并将class="show_hide"添加到div ID stickyfooter。我一直在摆弄，但我似乎无法让它发挥作用。我很可能做错了什么，但任何人都可以澄清Josh的意思吗？在此先感谢：）

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/

（顺便说一句，同时拥有一个名为“stickyfooter”的id和类会让人感到困惑。对我来说，如果包含的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/