点击li元素后无法隐藏ul

Question

点击输入后，我打开了<ul>列表，需要在单击<li>或屏幕上的其他位置时关闭它。

这是我的JS和HTML代码：

$(".drop-down-input").click(function() {
  $(".dropdown-list").show();
});

// get "li" value and set to input

$(function() {
  $(".dropdown-list li").on('click', function() {
    $idinput = $(".dropdown-list").siblings('input').attr('id');
    $idinput = '#' + $idinput;
    $($idinput).val($(this).html());
    $(".dropdown-list").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="styled-input-container drop-down-input">
  <input id="simple_2" class="drop-down-select" placeholder="input text" type="text">
  <ul class="dropdown-list">
    <li>eeee</li>
    <li>xxxx</li>
    <li>xxxx</li>
  </ul>
</div>

$(".dropdown-list").hide(); - 这段代码不起作用，我不知道为什么？

- Егор Кротенко

---

为什么要使用attr获取对象的id，然后再用该id获取对象呢？你已经拥有该对象了！ - Pete

@Pete 我修正了缩进，它不再内部。 - Barmar

没有必要获取兄弟元素的ID，然后使用 $($idinput)。只需将兄弟元素放入变量中，然后使用 $input.val() 即可。 - Barmar

$idinput = $(".dropdown-list").siblings('input'); $idinput.val($(this).html()); - 不起作用 - Егор Кротенко

Answer 1

您需要将点击事件绑定到输入元素而不是整个 div，否则可能会发生事件冒泡。虽然简单实际上没有必要通过 id 值再次获取 id 和选择元素。

$(function() {
  $(".drop-down-input input").click(function() {
    $(".dropdown-list").show();
  });
  $(".dropdown-list li").on('click', function() {
    // if there is multiple `.dropdown-list` then get based on 
    // this context , eg : $(this).parent()
    $(".dropdown-list") 
      .hide() // hide the element
      .siblings('input') // get the sibling
      .val($(this).html()); // set it's value
  });
});

$(function() {
  $(".drop-down-input input").click(function() {
    $(".dropdown-list").show();
  });
  $(".dropdown-list li").on('click', function() {
    $(".dropdown-list")
      .hide()
      .siblings('input')
      .val($(this).html());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="styled-input-container drop-down-input">
  <input id="simple_2" class="drop-down-select" placeholder="input text" type="text">
  <ul class="dropdown-list">
    <li>eeee</li>
    <li>xxxx</li>
    <li>xxxx</li>
  </ul>
</div>

---

或者使用event.stopPropagation()来防止事件冒泡。

$(function() {
  $(".drop-down-input").click(function() {
    $(".dropdown-list").show();
  });
  $(".dropdown-list li").on('click', function(e) {
    e.stopPropagation();
    $(".dropdown-list")
      .hide()
      .siblings()
      .val($(this).html());
  });
});

$(function() {
  $(".drop-down-input").click(function() {
    $(".dropdown-list").show();
  });
  $(".dropdown-list li").on('click', function(e) {
    e.stopPropagation();
    $(".dropdown-list")
      .hide()
      .siblings()
      .val($(this).html());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="styled-input-container drop-down-input">
  <input id="simple_2" class="drop-down-select" placeholder="input text" type="text">
  <ul class="dropdown-list">
    <li>eeee</li>
    <li>xxxx</li>
    <li>xxxx</li>
  </ul>
</div>

- Pranav C Balan

---

是的，它有效！如何做到这一点：在屏幕的另一个地方单击，此表格将关闭？ - Егор Кротенко

@ЕгорКротенко：是的，使用模糊事件来隐藏。 - Pranav C Balan

使用它在 body 上？点击 body 然后使我的列表失焦？ - Егор Кротенко

@PranavCBalan C Balan 哦.. 尝试关闭这个菜单已经两个小时了，你能帮我关闭它吗？ - Егор Кротенко