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

【问题标题】：jQuery animate an object when object clicked and when body is clicked, animate againjQuery在单击对象时为对象设置动画，当单击主体时，再次设置动画
【发布时间】：2015-04-21 08:27:51
【问题描述】：

嗨，我有这个简单的 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>

【问题讨论】：

.menu-icon 元素在哪里？

标签： jquery html jquery-animate click

【解决方案1】：

点击会冒泡，所以当您点击.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);

    });
});

【讨论】：

你知道如何在显示菜单时也使身体模糊吗？我尝试过使用 blurjs 但似乎不起作用

【解决方案2】：

将主体处理程序注册为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 正在显示。多田！

【讨论】：