Question

所以我试图登录下拉，但直到现在我不能。当我点击下拉列表中的输入时，它会模糊父元素并消失。

<div tabindex=0 class="dropdown">
  <a href="#">Open</a>
  <div><form action="">
    <input type="text">
  </form></div>
</div>

CSS

.dropdown{
  position: relative;
}

.dropdown > a {
  display:relative;
  padding: 10px;
  background: #e5e5e5;
}

.dropdown > div{
  display:none;
}

.open > div {
  display: block;
}

JS

Array.from(document.getElementsByClassName('dropdown')).forEach((element) => {
  element.getElementsByTagName('a')[0].addEventListener('click', () => {
    if(element.classList.contains('open')){
        element.classList.remove('open')
    } else {
        element.classList.add('open')
      element.focus();
    }
  })

  element.addEventListener('blur', () => {
    element.classList.remove('open')
  })

})

演示 https://jsfiddle.net/owtm649b/6/

Answer 1

更改

 element.focus();

为：

element.getElementsByTagName("input")[0].focus();

请参阅this。

当您专注于输入标记并因此关闭打开的菜单时，您将焦点置于 a tag 模糊上。

Answer 2

我通过替换身体点击事件的div blur事件和在该div上发生点击时的stopPropagation来解决它。

element.addEventListener('click', (e)=>{
        e.stopPropagation();
 })

document.body.addEventListener('click', ()=>{
        element.classList.remove('open')
 })

点击儿童会模糊父元素

2 个答案: