javascript - 每当我点击元素外部时它应该关闭

Question

每当我点击外部时，我都会尝试隐藏通知列表，但没有成功。我尝试了不同的代码。当我点击 class="notification" 时，应该会看到 class="notifications"，当我点击外部时，应该会隐藏。

当我点击外部时，此代码隐藏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 .notification 时显示 .notifications 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>