jquery - 如何在菜单(div)打开时禁用对链接的点击，并在菜单关闭时重新启用它？

Question

我正在创建下拉菜单，打开和关闭它时遇到问题。

当您单击链接 (.appHeader a.user) 时，它会打开一个隐藏的 ul (.appHeader ul.user-menu)。到目前为止，一切都按预期进行。但是，当我重新单击相同的链接(打开 ul)时，它会关闭并重新打开它。

因为我在 ul show 上有一个动画(淡入)，如果你连续快速点击它几次，它会创建一个非常讨厌的动画循环。

HTML:

<div class="appHeader">
    <div>
        <a class="user" href="#">Welcome, <span>Name Lastname</span></a>
        <ul class="user-menu">
            <div></div>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
        </ul>
    </div>
</div>

CSS:

.appHeader ul.user-menu {
    display: none;
    position:absolute;
    z-index: 900;
    width: 150px;
    border: 1px solid #111111;
    background: #FFFFFF;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
    text-align: left;
    list-style: none;
    padding: 10px 0;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    -ms-border-radius: 4px; 
    -o-border-radius: 4px; 
    border-radius: 4px; 
} 
.appHeader ul.user-menu li {
    margin:0;
    padding:0 10px;
    display: block;
}
.appHeader ul.user-menu li a {
    height: 15px;
    text-transform: none;
    background: #FFFFFF;
    line-height: 1em;
    font-size: 1em;
    display: block;
    text-decoration: none;
    color: #222222;
    padding:0;
    padding: 8px 10px;
    outline: none;
}
.appHeader ul.user-menu li a:hover { 
    background: #f2f2f2; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}
.appHeader ul.user-menu li a:active { 
    background: #CCCCCC; 
    color: #111111;
}
.appHeader ul.user-menu div {
    height: 8px;
    width: 16px;
    background: #FFF;
    margin:-18px 0 10px 120px;
    background: url(data:image/png;base64,...) no-repeat;
}

JS:

$('.appHeader a.user').on('click', function() {
    $('.appHeader ul.user-menu').fadeIn('fast');
    $(document).mouseup(function (e) {
        var container = $('.appHeader ul.user-menu');
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            $('.appHeader ul.user-menu').fadeOut('fast');
        }
    });
});

这是问题 http://jsfiddle.net/MxfPq/4/ 的 JSFiddle (尝试快速点击名字几次)

有什么方法可以在显示 ul 时禁用点击？然后在隐藏 ul 时重新启用点击？

我尝试过使用 .one() jQuery 函数，但这不是我想要的功能，这会完全禁用第二次点击。

Answer 1

您不需要禁用点击。在调用 fadeIn 函数之前简单地检查元素是否可见:

if(!$('.appHeader ul.user-menu').is(':visible'))
{
    $('.appHeader ul.user-menu').fadeIn('fast');
}   

完整的 jQuery:

$('.appHeader a.user').on('click', function() {
    if(!$('.appHeader ul.user-menu').is(':visible'))
    {
        $('.appHeader ul.user-menu').fadeIn('fast');
    }    
    $(document).mouseup(function (e) {
        var container = $('.appHeader ul.user-menu');
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            $('.appHeader ul.user-menu').fadeOut('fast');
        }
    });
});

演示:http://jsfiddle.net/MxfPq/8/