@KOPC1886

Как сделать скрытие элемента по клику вне его области?

Вот верстка
<div class="container">
            <div class="col-md-12 nopadding">
                <div class="fuel-price-title">Cписок <a class="view-regions"> <span class="dashed">Первый</span> <span class="caret"></span></a> 
                </div>  
    
                <div id ="reg-block" class="regions-block" style="display:none;">
                    <div class="regions-list">
                        <ul>
                            <li> <a href="#">1</a> </li>
                            <li class="active"> <a href="#">2</a> </li>
                            <li> <a href="#">3</a> </li>
						</ul>
                    </div>
				</div> 
            </div>
		</div>


Вот js
открытие списке есть, а как сделать чтобы список закрывался только по клику вне его области?
$('.view-regions').on('click', function(e){
        $('#reg-block').show();
       
    });
  • Вопрос задан
  • 249 просмотров
Решения вопроса 1
$('body').on('click', function (e) {
        if($(e.target).closest('.view-regions').prop('id') == undefined && $(e.target).closest('#reg-block').prop('id') == undefined){
             $('#reg-block').hide();
        }
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
bootd
@bootd Куратор тега HTML
Гугли и ты откроешь врата знаний!
Ответ написан
Комментировать
IonDen
@IonDen
JavaScript developer. IonDen.com
$('.view-regions').on('click', function(e){
    $('#reg-block').show();  
});

$('#reg-block').on('click', function (e) {
    e.stopPropagation(); // предотвращаем закрытие по клику в элемент
});

$(document).on('click', function () {
    $('#reg-block').hide(); // закрываем по клику вне
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы