Question

我有一个人名用户名的链接。单击它时，会出现一个小弹出窗口（无序列表）。我正努力做到这一点：

点击人员用户名，用fadein / out
如果单击以显示弹出按钮，然后单击“开启”，则不会消失
如果你点击弹出窗口以外的任何地方，它就会消失

这是我到目前为止所做的，但我基本上只是在愚弄自己，以为我知道自己在做什么：（

$(document).ready(function() {
    $('.flyout h3 a').click(function() {
        var flyout = $('.flyout ul');
        flyout.fadeToggle(80,function() {
            if ( flyout.is(':visible') ) {
                console.log('visible');
                $(document).on('click',function(e) {
                    flyout.fadeOut(80);
                    e.stopPropagation();
                });
            } else {
                $(document).off('click');
            }
        });
    });
});

HTML：

<div class="flyout">
                <h3>Welcome back, <a href="#">Dogbreath</a><img src="img/down-arrow.png" alt="dropdown"></h3>
                <div class="menu">
                    <ul>
                        <li><a href="#"><span class="icon">&#128101;</span>Users</a></li>
                        <li><a href="#"><span class="icon">&#128360;</span>Groups</a></li>
                        <li><a href="#"><span class="icon">&#9881;</span>Configuration</a></li>
                        <li><a href="#"><span class="icon">&#59201;</span>Logout</a></li>
                    </ul>
                </div>
            </div>

Answer 1

你试图在fadeToggle()

的回调函数中做太多

尝试这样的事情（未经测试）

$flyout = $('.flyout ul');
$('.flyout h3 a').click(function() { $flyout.fadeToggle(80) }

这会在点击用户名时隐藏/显示菜单，不是吗？

然后，单独和独立地绑定document上的事件（这可能需要一些调整）

// any click on document element that isn't a child of flyout, closes flyout
$(document).on('click',function(e) { if ($(e.target).parents($flyout).length == 0 $flyout.fadeOut() });

除了点击菜单外，如何隐藏任何菜单

1 个答案: