1

これが私のチーム メンバーが探していたものです: GMail のような機能を提供して、メールをクリックすると Logout div が開き、追加のユーザー情報が表示され、ドキュメントの外側の任意の場所をクリックするとそのボックスが閉じます (div を非表示にする) )?

4

2 に答える 2

0

clickこれを実現する最も簡単な方法は、ボックスを閉じるハンドラー全体documentと、ボックス用のハンドラーをバインドすることです。ボックスのイベントでは、クリックイベントの伝播を停止します。

$(document).on('click', function() {
    $('#box').hide();
});

$('#box').on('click', function(e) {
    e.stopPropagation();
});

デモ： http： //jsfiddle.net/ThiefMaster/JTtXB/
クリックイベントがボックスを開く場合は、その伝播を停止する必要があることに注意してください。そうしないと、すぐに再び閉じられます。

于 2012-06-09T13:00:10.117 に答える
-1

次のコードを使用して実現できます。

HTML:

<a href="#" id="show-card">Dharmavir</a>
<div id="user-card" style="display:none">
    <p>
        Welcome Dharmavir,<br />
        ABC Software, Inc
    </p>
    <a href="#">Logout</a>
<div>

Javascript:

$(document).ready(function(){
    // To show user-box
    $("#show-card").mouseup(function(){
        $("#user-card").show();

        // To hide user-box
        $(document).mousedown(function(){
            $("#user-card").hide();
            $(this).unbind("mousedown");
        })
    });
});

CSS:

#user-card {
    height:75px;
    width:200px;
    border:solid 1px #ccc;
}

同じための JSFiddle はhttp://jsfiddle.net/dharmavir/tPdsE/で見ることができます

于 2012-06-09T12:53:43.047 に答える