jQuery 单击对象时为对象设置动画，单击主体时再次设置动画

Question

嗨，我有这个简单的 jQuery 代码：

var main = function() {
    $('.menu-icon').click(function() {
        $('.menu').animate({
            left: '0px'
        }, 200);
    });
    $('body').click(function() {
        $('.menu').animate({
            left: '-200px'
        }, 200);
    });
};

$(document).ready(main);

我想让菜单在单击 .menu-icon 时出现，在单击除 .menu 和 .menu-icon 以外的所有内容时消失。当我按下 .menu-icon 时，两个动画都会发生。我还想为下面列表中的每个项目创建一个特殊页面，当按下菜单时它会加载该页面。

我有这个列表：

<div class="menu">
        <ul>
            <li><a href="#"><div class="home">Home</div></a></li>
            <li><a href="#"><div class="apps">Apps</div></a></li>
            <li><a href="#"><div class="themes">Themes</div></a></li>
            <li><a href="#"><div class="request">Requests/Fixes</div></a></li>
            <li><a href="#"><div class="help">Help</div></a></li>
            <li><a href="#"><div class="about">About</div></a></li>
        </ul>
</div>

Answer 1

将主体处理程序注册为 one 事件，这意味着它只会运行一次。然后在你点击元素后声明：

var main = function() {
    $('.menu-icon').click(function() {
        $('.menu').animate({
            left: '0px'
        }, 200);

        // Bind once here
        $('body').one('click',  function() {
            $('.menu').animate({
                left: '-200px'
            }, 200);
        });
    });
};

$(document).ready(main);

这样事件处理程序只存在，而 .menu 正在显示。多田！

Answer 2

单击气泡，因此当您单击 .menu-icon 时，单击也会传播到正文，同时触发两个事件处理程序。

您可以改为使用单个事件处理程序来执行此操作

$(function() {
    $(document).on('click', function(e) {
        var left = '-200px';

        if ( $(e.target).closest('.menu-icon').length ) {
            left = '0px';
        }

        $('.menu').animate({
            left: left
        }, 200);

    });
});

jQuery 单击对象时为对象设置动画，单击主体时再次设置动画

jQuery animate an object when object clicked and when body is clicked, animate again

jquery

html

jquery-animate

click