javascript - 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/

（顺便说一句，同时拥有一个 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/