句柄下拉列表的焦点状态

Question

我目前正在用纯JavaScript制作一个下拉组件。当用户单击下拉开关时，内容将获得焦点并显示其内容。当用户在其外部单击时，内容将失去焦点并被隐藏。

到目前为止，它工作得很好。但是，我遇到了两个问题。

第一个是，当单击下拉列表中的元素(例如：锚标记(时，下拉列表会失去焦点，这是不应该的。

第二个是，在显示下拉列表内容时单击下拉列表切换开关时，由于在下拉列表切换上注册了单击，下拉列表应关闭而不是关闭然后重新打开。

.HTML：

<div class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown toggle</a>
<div class="dropdown-content" tabindex="0">
<ul>
<li>
<a href="http://example.com">My profile</a>
</li>
<li>
<a href="http://example.com">Log out</a>
</li>
</ul>
</div>
</div>

.CSS：

.dropdown {
position: relative; 
}
.dropdown.is-open .dropdown-content {
display: block; 
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
width: 100%;
padding: 0.5rem 0;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
}

.JS：

class Dropdown {
constructor(element) {
this.element = element;
this.toggle = this.element.querySelector('.dropdown-toggle');
this.content = this.element.querySelector('.dropdown-content');
this.bindings();
}
bindings() {
this.toggle.addEventListener('click', this.open.bind(this));
this.content.addEventListener('keydown', this.handleKeyDown.bind(this));
this.content.addEventListener('focusout', this.close.bind(this));
}
open(e) {
e.preventDefault();
this.element.classList.add('is-open');
this.content.focus();
}
close(e) {
this.element.classList.remove('is-open');
}
handleKeyDown(e) {
if (e.keyCode === 27) {
this.close(e);
}
}
} 
document.querySelectorAll('.dropdown').forEach(dropdown => new Dropdown(dropdown));

我一直在试图弄清楚如何解决这些问题，但没有任何运气。关于如何解决这些问题的任何想法？

Answer 1

经过一些测试，我找到了一个有效的解决方案。尝试下面的代码

class Dropdown {
constructor(element) {
this.element = element;
this.toggle = this.element.querySelector('.dropdown-toggle');
this.content = this.element.querySelector('.dropdown-content');
this.bindings();
}
bindings() {
this.toggle.addEventListener('click', this.open.bind(this));
this.content.addEventListener('keydown', this.handleKeyDown.bind(this));
this.element.addEventListener('focusout', this.onFocusOut.bind(this),true);
}
onFocusOut(e) {
if (!this.element.contains(e.relatedTarget)) {
this.close(e)
}
}
open(e) {
e.preventDefault();
this.element.classList.toggle('is-open');
this.content.focus();
}
close(e) {
e.preventDefault();
this.element.classList.remove('is-open');
}
handleKeyDown(e) {
if (e.keyCode === 27) {
this.close(e);
}
}
}