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 に答える