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

Posted 2023-05-08

【中文标题】jQuery在单击对象时为对象设置动画，当单击主体时，再次设置动画

【英文标题】：jQuery animate an object when object clicked and when body is clicked, animate again

【发布时间】：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 元素在哪里？

【参考方案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 正在显示。多田！