javascript - 专注于绝对元素

Question

我有一个按钮女巫仅在父(父类)元素悬停时显示。父类有position:relative，按钮有absolute:position。它工作正常。

现在我想要一个只有在我点击按钮时才会出现的下拉列表。

我尝试将 absolute:position 和 display:none 设置为下拉列表类，并且仅当我聚焦按钮时才显示下拉列表。但它不起作用。

这是一个示例代码:

<div class="parent-class">
   <button class="btn" >button</button>
   <ul class="dropdown-list">
    <li > content1</li>
    <li > content1</li>
   </ul>
</div>

.parent-class{
 position: relative;
}

.parent-class:hover .btn{
 display:block;
}

.btn{
 position:absolute;
 display:none;
}

.btn:focus .dropdown-list{
 display: block;
}

.dropdown-list{
position: absolute;
display: none;
}

我还使用了 Angular 2，所以如果有办法用 Angular 2 解决这个问题，那将是完美的

Answer 1

您的问题是，当您使用 .btn:focus .dropdown-list 时，您希望 .dropdown-list 元素成为 的子元素.btn 元素(在你的情况下 - 它们不是)。 .dropdown-list 是 .btn 的兄弟元素。

您可以使用 ~(同级选择器)解决这个问题:

.parent-class{
  position: relative;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

.parent-class:hover .btn{
  display:block;
}

.btn{
  position:absolute;
  display:none;
}

.btn:focus ~ .dropdown-list{
  display: block;
}

.dropdown-list{
  position: absolute;
  display: none;
}

<div class="parent-class">
  <button class="btn" >button</button>
  <ul class="dropdown-list">
    <li > content1</li>
    <li > content1</li>
  </ul>
</div>