导航菜单动画切换答案

【问题标题】：Navigation menu animate toggle导航菜单动画切换
【发布时间】：2015-03-16 15:41:14
【问题描述】：

我有一个要切换的导航栏。第一个动画有效，但我不知道如何将菜单滑出屏幕。

这是我的代码：

// SHOW NAVIGATION BAR
$("#menu-btn").click(function() {
    $("nav").animate({
        left: '270px'
    });
    $("#menu-btn").removeClass().addClass("#menu-btn-active");
});

// HIDE NAVIGATION BAR
$("#menu-btn-active").click(function() {
    $("nav").animate({
        left: '-270px'
    });
    $("#menu-btn-active").removeClass().addClass("#menu-btn");
});

感谢任何帮助！

【问题讨论】：

它们是 id 不是初学者的类 :) 摆脱 addClass 调用上的散列。你真的有一个nav 类型的元素，还是那个选择器也坏了？
你的动画也做同样的事情（动画左到 270px）！
我选择了 HTML 中的所有
元素。我已将 .js、.css 和 .html 文件中的所有 ID 替换为 Classes，但没有任何效果。
这只是您问题的一部分，请参阅下面的答案。
动画左边是粘贴错误顺便说一句。隐藏导航部分应向左显示：'-270px'

标签： jquery menu navigation jquery-animate toggle

【解决方案1】：

您希望将类用于类而不是 ID。此外，由于事件处理程序连接一次，因此在加载时更改这些类时它们不匹配。

您也没有更改动画（都将nav 元素设置为 270 像素）。其中一个必须更改到其他地方。

注意：您不需要使用px 和字符串来制作动画。它会自动将数字转换为像素值。

使用委托事件处理程序，附加到不变的祖先元素，而不是：

例如像这样（使用类）

// SHOW NAVIGATION BAR
$(document).on('click', ".menu-btn", function() {
    $("nav").animate({
        left: '270px'
    });
    $(this).removeClass().addClass("menu-btn-active");
});

// HIDE NAVIGATION BAR
$(document).on('click', ".menu-btn-active", function() {
    $("nav").animate({
        left: '-270px'
    });
    $(this).removeClass().addClass("menu-btn");
});

委托事件处理程序将责任委托给祖先元素，然后在事件时间（而不是事件注册时间）应用 jQuery 选择器。这意味着它们只需要在偶数发生时匹配）。

这整个事情可以使用toggleClass 简化为一个处理程序，但这会让你暂时摆脱困境:)

例如

// HIDE NAVIGATION BAR
$(document).on('click', ".menu-btn", function() {
    $(this).toggleClass("active")
    $("nav").animate({
        left: $(this).hasClass('active') ? 270 : -270   // or wherever
    });
});

由于您不再动态更改连接样式，因此可以简化为：

// HIDE NAVIGATION BAR
$(".menu-btn").click(function() {
    $(this).toggleClass("active")
    $("nav").animate({
        left: $(this).hasClass('active') ? 270 : -270   // or wherever
    });
});

【讨论】：

toggleClass 确实简单多了。

【解决方案2】：

初始化$("#menu-btn-active").click()时有多少$("#menu-btn-active")？无。稍后单击元素时将添加该属性。所以这没有任何作用。

为了获得适用于当前和未来元素的点击，请使用$(document).on('click, "element", function()...

另外，使用类，而不是 ID：

$(document).on('click', ".menu-btn", function() {
    $("nav").animate({
        left: '270px'
    });
    $("#menu-btn").removeClass().addClass("menu-btn-active");
});

// HIDE NAVIGATION BAR
$(document).on('click', ".menu-btn-active", function() {
    $("nav").animate({
        left: '270px'
    });
    $("#menu-btn-active").removeClass().addClass("menu-btn");
});

【讨论】：

看来这个解决方案也有同样的问题。菜单完美打开，但不会关闭。谢谢你的建议。

【解决方案3】：

你也可以试试这个。这是您正在寻找的 100% 工作。

<style type="text/css">
        .toggle{
            width: 100px;
            height: 50px;
            background: #f0f;
            left: 0;
            position: relative;
        }
    </style>

<div class="toggle"></div>
$(document).ready(function () {
            $('.toggle').on('click', function () {
                $(this).animate({
                    left: '27px'
                });
                $(this).addClass('active');
                $('.active').on('click', function () {
                    $(this).animate({
                        left: '0px'
                    });
                    $(this).removeClass('active');

                });
            });
        });

Demo

【讨论】：