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

    });
});

当单击对象并单击body时，jQuery为对象设置动画，再次设置动画

2 个答案: