Question

每当我在外部单击时，我都试图隐藏通知列表，但未成功。我尝试了不同的代码。当我点击class="notifications"时，应该可以看到class="notification"，而当我单击外部时，则应该将其隐藏。

当我在外面单击时，此代码会隐藏class="notification"（主div）。

JS

$('.notification').on('click', function(event){
    $(this).find('.counter').hide();
    $(this).find('.notifications').toggleClass('hidden');
});

$(document).on('click', function(e) {
    if (e.target !== 'notification') {
        $('.notifications').hide();
    }
});

HTML

<div class="notification hide-on-med-and-down">
    <span><img src="{% static 'img/notification2.png' %}" alt="Notification" title="Notification"></span>

    {% if unread_notifications_count %}
        <div class="counter">{{unread_notifications_count}}</div>
    {% endif %}

    <ul class="notifications hidden">
        {% for n in notifications %}
            <li class="{% if not n.read %} new {% endif %}">
                <div class="icon"><img src="/static/img/icon-popup.svg"></div>
                 <a href="{{n|notification_url}}">
                     {{n.text}}
                     <div class="date" data-date="{{n.date.ctime}}">{{n.get_date}}</div>
                 </a>
                 <div class="clearfix"></div>
             </li>
        {% endfor %}
        <a href="{% url 'notification_list' %}"><div class="see-all">See all</div></a>
    </ul>
</div>

Answer 1

您必须尝试mouseup事件以获取目标div并根据需要隐藏/显示。进一步了解.mouseup() Event Handler

检查以下代码，以在单击父div .notifications时显示.notification div，如果在div之外单击，则.notifications div应该被隐藏。

$('.notification').on('click', function(event){
    $(this).find('.counter').hide();
    $('.notifications').removeClass('hidden');
});

$(document).mouseup(function (e) {
    var container = $('.notifications');
    
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        $('.notifications').addClass('hidden');
    }
});

.notification {
    background: #5fba7d;
    color: white;
    padding: 15px 20px;
}

.notifications {  
    background: white;
    border: 1px solid green;
    color: white;
    padding: 5px 20px;
}

.counter {
    padding: 5px;
    border-radius: 20px;
    background: #ffffff;
    position: absolute;
    left: 110px;
    font-size: 12px;
    color: #5fba7d;
    top: 10px;
}

.hidden {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="notification hide-on-med-and-down">
    <span><img src="/static/img/icon-popup.svg" alt="Notification" title="Notification"></span>

    <div class="counter">100</div>

    <ul class="notifications hidden">
        <li class="">
          <div class="icon"><img src="/static/img/icon-popup.svg"></div>
          <a href="javascript:void(0);">
            <div class="date" data-date="2018-07-12">2018-07-12</div>
          </a>
          <div class="clearfix"></div>
        </li>
      <a href="javascript:void(0);"><div class="see-all">See all</div></a>
    </ul>
</div>

Answer 2

$(".notification").on("blur", function(){
   $(".notification").hide();
});

Answer 3

尝试

$('.notification').on('click', function(event){
    $(this).find('.counter').hide();
    $(this).find('.notifications').toggleClass('hidden');
});


$(document).on('click', function(e) {
    if (!e.target.hasClass('notification')) {
      $('.notifications').hide();
    }
});

Answer 4

尝试将事件监听器添加到body而不是document。

$('body').on('click', function() {
    $('.notifications').hide();
}

Answer 5

尝试一下

var notification = document.getElementsByClassName("notification")[0];
window.onclick = function(event) {
    if (event.target == notification) {
        notification.style.display = "none";
    }
}

每当我在元素外部单击时，它都应该关闭

5 个答案: