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 関数を試してみましたが、これは必要な機能ではありません。これにより、2 回目のクリックが完全に無効になります。

4

4 に答える 4

0

ユーザーがクリックするたびに別の mouseup リスナーを作成するという問題があります。これにより、リスナーが積み重なり、クリックが多すぎると最終的に問題が発生します。

2 つのイベントには個別のリスナーが必要です。何かのようなもの：

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

マウスアップが同じ領域にあるときにのみフェードアウトするのは奇妙です。ユーザーがマウスを離しても、それは起こりません。

しかし、クリックはダウンプラスアップなので、2回目のクリックがない限り、クリック後にマウスアップが発生するのはどうしてでしょうか? 私はあなたがそれをどのように機能させたいのか理解していないと思います。上記の私のメモを参照してください。

于 2013-10-11T15:41:04.157 に答える