Скрыть блок при нажатии вне его

141

15 октября 2021, 05:40

Есть два input-а реализованные, как select. Если кликаем на первый блок, затем на второй, то первый должен закрываться У них одинаковые классы.

$(this).on('click', function(e) {
        if (!$(e.target).closest(".container-input-select").find('.input-as-select').length) {
            $(this).find('.input-as-select-border-active').addClass('input-as-select-transform');
        }
        e.stopPropagation();
    });

Таких div - ов у меня несколько с одинаковыми классами. И происходит сворачивание input, только если кликаем вне области, а при клике на второй input, поскольку у них одинаковые классы, первый не скрывается.

<div class="container-input-select">
    <div class="input-as-select">
        <input type="text" readonly>
        <div class="points-to-select-input uk-hidden">
            <ul class="uk-list">
                <li>+7-909-000-00-00</li>
                <li>+7-954-645-65-43</li>
                <li>Другое</li>
            </ul>
        </div>
    </div>     
</div>

Answer 1

если стоит задача сворачивать инпуты при клике ВНЕ их, то не проще ли добавить стили, которые свернут ВСЕ инпуты, кроме активного?

типа такого:

.area { 
  background-color: wheat; 
  height: 200px; 
  padding:1em; 
} 
 
.expanded { 
  border: 1px solid #ccc; 
  padding: 0.25em 0.5em; 
  margin: 1em; 
  display: inline-block; 
  width: 100px; 
  height: 1.25em; 
  border-radius: 4px; 
  background-color: #fff; 
  vertical-align: top; 
  transition-duration:0.5s; 
} 
 
.expanded:active, 
.expanded:focus { 
  height: 100px; 
}

<div class="area"> 
  Click outside textareas to collapse them<br> 
 
  <textarea class="expanded">click me!</textarea> 
  <textarea class="expanded">click me!</textarea> 
  <textarea class="expanded">click me!</textarea> 
 
</div>