0

通知「ボタン」のあるウェブサイトを作っています。ユーザーがこのボタンをクリックすると、通知divがボタンの下部に表示されます。

Facebookでの通知のような振る舞いをしたいです。ユーザーがnotificationdiv要素の外側をクリックすると、通知は消えます。

これまでのところ、通知ボタンがクリックされたときに通知divをフェードインおよびフェードアウトさせることに成功しました。私はこれを行うためにjqueryを使用しています。

しかし、ユーザーが通知divの外側をクリックしたときにフェードアウトさせる方法がわかりません。

誰か助けてもらえますか？

これが私が作った私のコードです：

<div id="notifikasi" style="position:relative; cursor:pointer">Notification<sup style="padding: 2px 4px 2px 4px; background: red"></sup>
    <div id="theNotif" style="position: absolute; top: 20px; left: 0px; background: #fff; color: #000; border: solid 1px #999; z-index: 999; padding: 10px 20px 10px 0px; width:200px; display:none">
        <ul>
            <li>Some Notification</li>
            <li>Some Notification</li>
            <li>Some Notification</li>
        </ul>
    </div>
</div>

<script>
$('#notifikasi').click(function(){
    if($('#theNotif').css('display') == 'none'){
        $('#theNotif').fadeIn('fast');
    }
    else{
        $('#theNotif').fadeOut('fast');
    }
});
</script>
4

3 に答える 3

4

これを試して：

$(document).mouseup(function (e)
{
    var myDiv = $("#theNotif");
    if (myDiv.has(e.target).length === 0)
        myDiv.hide();
});
于 2012-08-07T17:00:37.537 に答える
2

どうですか：

$('#notifikasi').click(function(){
    $('#theNotif').fadeIn('fast', function() {
        $(document).one('click', function(e) {
            $('#theNotif').fadeOut('fast');
        });
    });
});

// prevent triggering when clicking the actual notification
$('#theNotif').click(function() { return false; });​

デモ

通知がフェードインすると、クリックをリッスンする1回限りのクリックリスナーがドキュメントに追加されます。

編集

このように少し自分で遊んだ結果、.one他のいくつかの回避策が必要になるため、ここでは最初に想像したほど有用ではないという結論に達しました。私がそれを使用した理由は、通知が開いているシナリオをカバーするためだけに、ドキュメントのクリックごとに常に耳を傾ける必要があるためです。

代わりに、bindとunbindを使用するのがより適切な方法であると判断しました。

function closeNotification(e) {
   if($(e.target).closest('#theNotif').length > 0) {
      // notification or child of notification was clicked; ignore
      return;
   }

   $('#theNotif').fadeOut('fast');
   $(document).unbind('click', closeNotification);
};

$('#notifikasi').click(function(){
    $('#theNotif').fadeIn('fast', function() {
        $(document).bind('click', closeNotification);
    });
});

デモ

上記のコードは、概念的には元のコードとかなり似ています。フェードイン後、クリックリスナーがドキュメントに登録されます。今回は、クリックされた要素がの子であるかどうかを確認するために、ドキュメントクリックリスナー内でチェックが行われます。この場合、close関数はすぐに終了します。#theNotif#theNotif

それ以外の場合は、通知を閉じてすぐにリスナーのバインドを解除します。

正しくバインドを解除するには、jQueryで使用されているような匿名のインライン関数ではなく、名前付き関数を使用する必要があることに注意してください。

于 2012-08-07T17:00:40.017 に答える
0

マウスがnotifikasi（たとえばa = 1）の上に移動するときに変数を設定し、外側に移動するときに変数を設定解除します。TheNotifについても同様です。今

$(document).click(function(){
    if(a == 0){
        if($('#theNotif').css('display') == 'block' || $('#theNotif').css('display') == ''){
            $('#theNotif').fadeOut('fast');
        }
    }
});
于 2012-08-07T17:20:29.877 に答える