0

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

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

因为我在 ul show (fadeIn) 上有一个动画，所以如果你快速单击它几次，它会创建一个非常讨厌的动画循环。

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

这是问题的 JSFiddle http://jsfiddle.net/MxfPq/4/（尝试快速单击名称几次）

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

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

4

4 回答 4

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/

于 2013-10-11T15:33:56.860 回答
0

每次用户单击时，您都会创建另一个 mouseup 侦听器，这是一个问题。这将堆积听众，并在点击过多后最终导致问题。

这两个事件需要单独的侦听器。就像是：

$('.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');
    }
});

奇怪的是，当鼠标悬停在同一区域上时，您只会将其淡出。如果用户将鼠标移开，则不会发生。

但是点击是向下加向上，那么除非有第二次点击，否则点击后怎么会有鼠标向上？我想我不明白你希望它如何工作。见我上面的注释。

于 2013-10-11T15:41:04.157 回答
0

如果你真的想阻止点击。尝试防止默认。否则，Axel 的回答是 imo 的最佳方式。我已将 preventdefault 用法添加到 Axel 的答案中。

$('.appHeader a.user').on('click', function(event) {
    if(!$('.appHeader ul.user-menu').is(':visible'))
    {
        $('.appHeader ul.user-menu').fadeIn('fast');
    }
    else
    {
        event.preventDefault();
    } 
    $(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');
        }
    });
});
于 2013-10-11T15:39:27.193 回答
0

检查它是否尚未打开：

$('.appHeader a.user').on('click', function() {
    if($('.appHeader ul.user-menu').is(':hidden')){
        $('.appHeader ul.user-menu').slideDown('fast');
    } else {
        $('.appHeader ul.user-menu').slideUp('fast');
    }
    return false;
});

http://jsfiddle.net/MxfPq/12/

于 2013-10-11T16:01:14.543 回答