主页 / 问题 / 1040325
Accepted
Виктор Тюрин
Asked:2020-10-30 19:08:40 +0000 UTC2020-10-30 19:08:40 +0000 UTC

在其外部单击时隐藏块

  • 772

有两个输入实现为选择。如果我们单击第一个块，然后单击第二个，那么第一个应该关闭。它们具有相同的类。

$(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 具有相同的类。只有当我们在区域外单击时输入才会折叠，当我们单击第二个输入时，由于它们具有相同的类，因此第一个不会隐藏。

<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>
jquery

1 个回答

  1. Best Answer

    如果任务是在单击它们的外部时折叠输入，那么添加折叠所有输入的样式是否更容易，除了活动的输入？

    像这样：

    .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>

    • 2

相关问题