Question

我有一个导航栏，我试图切换。第一个动画可以工作，但我无法解决如何将菜单滑回屏幕的问题。

这是我的代码：

// 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");
});

感谢任何帮助！

Answer 1

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

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

注意：您无需使用px和字符串进行动画处理。它会自动将数字转换为像素值。

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

e.g。这样的事情（使用类）

// 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的单个处理程序，但是这会让你从现在的洞中解脱出来：）

e.g。

// 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
    });
});

Answer 2

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

要获得适用于当前和未来元素的点击，请使用$(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");
});

Answer 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

导航菜单动画切换

3 个答案: