javascript - 单击子元素会模糊父元素

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 .

您将焦点放在标签上，当您将焦点放在输入标签上时，该标签会模糊，从而关闭打开的菜单。