javascript - 使用 jquery 关闭 css 下拉列表

Question

对于模糊的项目标题，我深表歉意，但我不知道如何解释它。

那么，让我们深入探讨一下。我需要一个包含多个选择选项的下拉列表来选择收件人。

我开始在 Codepen 上搜索并发现了这个:https://codepen.io/MaartenTe/pen/mXYLXj

我已经 fork 了它，所以我可以自己调整它。片段完美无缺。唯一缺少的是在下拉列表外单击时关闭下拉列表的功能。

所以我开始使用 javascript 来处理它。到目前为止，我得到了以下代码:

$(document).click(function(e) {
  var target = e.target; //target div recorded
  if (!$(target).is('.multi-select ') ) {
    $('.multi-select-options span').css('display', 'none');
    $('.multi-select-options label').css('display', 'none');
  }
});

虽然这不是我想要的方式，但我认为这是正确的方法？

Answer 1

看看它是如何工作的，它是一个导致切换的复选框，因此您需要在单击该框时清除它。

$('.multi-select').on('click', function(e){
  e.stopPropagation()
});

$(window).on('click', function(e) {
 $('#toggle-open').attr({checked: false})
});

stopPropagation 将停止窗口点击甚至触发。 https://codepen.io/anon/pen/rdwrya?editors=1111