Делал свой селектор и столкнулся с сложностью его скрытия при клике вне области выбора. Подскажите пожалуйста как это можно сделать.
var selector = $('.selector_status');
var list = $('.list_status');
var option = $('.option');
var flag = 0;
var saveVal;
var saveText;
selector.on('click', function() {
if (flag == 0) {
flag = 1;
list.css('display', 'block');
} else {
flag = 0;
list.css('display', 'none');
}
return false;
});
option.on('click', function() {
saveVal = option.attr('val');
saveText = option.text();
option.attr('val', selector.attr('val'));
option.text(selector.text());
selector.attr('val', saveVal);
selector.text(saveText);
flag = 0;
list.css('display', 'none');
return false;
});
<div class="selector selector_status" val="yes" name="event_status">Проведено</div>
<div class="result_list list_status" style="display: none; visibility: visible;">
<ul style="position: relative; visibility: visible;">
<li class="option" val="no">Не проведено</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Пробовал вот таким вот способом:
$(document).click(function(event) {
if ($(event.target).closest('.list_status').length) return;
else {
$('.list_status').css('display', 'none');
}
});
Но минус в том, что он не всегда срабатывает, а если и срабатывает, то для того, чтобы снова открыть "лист" нужно кликать 2 раза.