0

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

  1. 单击人员用户名将弹出 ul 切换为淡入/淡出
  2. 如果您单击以显示弹出窗口，然后单击 ul，它不会消失
  3. 如果您单击除弹出按钮以外的任何地方的主体，它就会消失

这就是我到目前为止所拥有的，但我基本上只是在自欺欺人地认为我知道自己在做什么:(

$(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>
4

1 回答 1

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() });
于 2012-10-31T22:20:18.183 回答