Question

单击left，然后单击sela。它是打开的并自动关闭。是什么原因？

$('#left').on('click', function() {
  $('.sela').appendTo($(this));
});

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 9px;
  height: 120px;
}

.left {
  background: silver;
  position: relative;
}

.right {
  background: gold;
}

.sela {
  position: absolute;
  right: 9px;
  top: 5px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='parent'>
  <div class='left' id='left'></div>
  <div class='right'>323</div>
</div>

<select class='sela'>
  <option>lorem</option>
  <option>ipsum</option>
</select>

Answer 1

每次点击#left时，select标记将从DOM中的先前位置移除（这将破坏当前与之的用户交互），并将其附加到新位置。如果新位置与原始位置相同，那么它将使当前的点击互动无效-这不是您想要的。

如果事件的目标不是.append的，则您只能.sela：

$('#left').on('click', function(e) {
  if (!e.target.matches('.sela'))
    $('.sela').appendTo($(this));
});

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 9px;
  height: 120px;
}

.left {
  background: silver;
  position: relative;
}

.right {
  background: gold;
}

.sela {
  position: absolute;
  right: 9px;
  top: 5px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='parent'>
  <div class='left' id='left'></div>
  <div class='right'>323</div>
</div>

<select class='sela'>
  <option>lorem</option>
  <option>ipsum</option>
</select>

Answer 2

使用以下脚本代替您的脚本。

$('#left').on('click', function(e) {
      if (!e.target.matches('.sela'))
          $('.sela').appendTo($(this));
 });

始终检查选择是否在同一div上。否则，它将在左div内的每次点击中将选择的位置置于左div。

Answer 3

另一种选择-

您可以在首次点击后将其删除。

$('#left').on('click', function(e) {
    $('.sela').appendTo($(this));
    $(this).off('click');
});

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 9px;
  height: 120px;
}

.left {
  background: silver;
  position: relative;
}

.right {
  background: gold;
}

.sela {
  position: absolute;
  right: 9px;
  top: 5px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
  <div class='left' id='left'></div>
  <div class='right'>323</div>
</div>
          
<select class='sela'>
  <option>lorem</option>
  <option>ipsum</option>
</select>

选择标签会在点击时自动关闭

3 个答案: