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

【问题标题】：Jquery Toggle Hide / Show Nav ElementJquery 切换隐藏/显示导航元素
【发布时间】：2012-06-25 22:36:25
【问题描述】：

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

【问题讨论】：

开始于：$("#stickyfooter").hide(); $("#sticky_footer_title ").css({'bottom':0});你能帮忙吗？

标签： javascript jquery

【解决方案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" 会更有意义。）

【讨论】：

太棒了！我已经尝试了您的两种解决方案，它们都有效！虽然我选择了替代解决方案:) 我同意它有点令人困惑（特别是在很长一段时间后回到那个代码），我确实遵循了你的建议，将它改为 id="stickyfootercontainer" ...好吧斑！谢谢你在这里帮助我。希望这对其他人有帮助！
...尽管我认为这与 javascript 部分有关，但我应该更多地关注 CSS。这是一个学习曲线！

【解决方案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/

【讨论】：