带焦点的 CSS 下拉菜单

Question

我有一个简单的自定义 CSS 下拉菜单，例如 this。单击下拉菜单按钮将切换其下方容器的显示（绝对定位）。我试图模仿 HTML select 元素的行为，其中 focusout 也隐藏了菜单。最好的方法是什么？如果我将焦点事件处理程序添加到下拉内容 div，单击按钮本身将导致双重触发（焦点和切换）。

$('.dropdown-btn').on('click', function (e) {
	$('.dropdown-content').toggleClass('hide');
});

$('.dropdown-btn').focusout(function (e) {
    $('.dropdown-content').addClass('hide');
});

$('a').on('click', function (e) {
    // wont run
    console.log(this);
});

.dropdown-container {
  position: relative;
}
.dropdown-btn {
  width: 70px;
  background: cyan;
  padding: 12px;
}
.dropdown-content {
  position: absolute;
}

.dropdown-content a {
  margin-bottom: 1px;
  background: cyan;
  display: block;
}

.hide {
  display: none;
}

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<div class="dropdown-container">
  <div class="dropdown-btn" tabindex="-1">Dropdown</div>
  <div class="dropdown-content hide">
    <a>Dropdown item 1</a>
    <a>Dropdown item 2</a>
  </div>
</div>

Answer 1

focusout 监听器仅在 表单元素 上工作。如果您需要它在 divs 上工作，您可以将 tabindex 属性分配给 div。

还从dropdown-content 中删除了absolute，并将display: inline-block 添加到dropdown-content 和dropdown-container。要删除 outline on focus 事件，请执行以下操作：

.dropdown-container:focus {
  outline: none;
}

见下面的演示和jsfiddle:

$('.dropdown-btn').on('click', function(e) {
  $('.dropdown-content').toggleClass('hide');
});

$('.dropdown-container').focusout(function(e) {
  $('.dropdown-content').addClass('hide');
});

.dropdown-container {
  position: relative;
  display: inline-block;
}
.dropdown-container:focus {
  outline: none;
}

.dropdown-btn {
  width: 70px;
  background: cyan;
  padding: 12px;
}

.dropdown-content {
  display: inline-block;
  /*position: absolute;*/
}

.dropdown-content a {
  margin-bottom: 1px;
  background: cyan;
  display: block;
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-container" tabindex="-1">
  <div class="dropdown-btn">Dropdown</div>
  <div class="dropdown-content hide">
    <a>Dropdown item 1</a>
    <a>Dropdown item 2</a>
  </div>
</div>