在编辑器聚焦时显示工具栏然后隐藏它

Question

我在我的网站上使用了textangular的工具栏和编辑器。我有一个让我困惑的问题。在我的页面中，我有一些编辑器，每个编辑器都有自己的工具栏。我的目的是，当编辑器1聚焦时，工具栏1被显示，其他工具栏被隐藏。当编辑器2聚焦时，只显示toolbar2，其他人隐藏等等。我如何管理它。我看到下面的链接，但这个解决方案只是隐藏和显示所有工具栏彼此不是一个一个，所以它对我没用。 注意我希望所有工具栏都隐藏在页面的加载中。 我在问题中附上了一张图片，以便更清楚。

Show TextAngular toolbar only when editor is in focus for multiple editors with 1 toolbar

Answer 1

我不熟悉TextAngular，但总的来说： 您只需使用带:focus伪类的CSS和+相邻兄弟选择器即可。

HTML：

<div class="container">
  <textarea></textarea>
  <div class="toolbar"></div>
</div>
<div class="container">
  <textarea></textarea>
  <div class="toolbar"></div>
</div>
<div class="container">
  <textarea></textarea>
  <div class="toolbar"></div>
</div>

CSS：

.container {
  width: 400px;
  height: 250px;
  position: relative;
  margin-bottom: 50px;
  padding-top: 30px;
  border: 1px solid black
}

textarea {
  width: 100%;
  height: 100%;
}

.toolbar {
  width: 100%;
  height: 30px;
  background: pink;
  position: absolute;
  top: 0;
  display: none;
}

textarea:focus + .toolbar {
  display: block;
}

请参阅：http://jsbin.com/qefokebaqe/edit?html,css,output

注意：这依赖于标记按特定顺序排列。 （希望您正在使用的TextAngular设置允许这样做）工具栏必须在 textarea之后，并且它必须是兄弟。您可以+使用~，如果是兄弟姐妹则使用textarea:focus ~ .toolbar：Service

请参阅：Is there a "previous sibling" CSS selector?