1

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

在此处输入图像描述 仅当编辑器成为具有 1 个工具栏的多个编辑器的焦点时才显示 TextAngular 工具栏

4

1 回答 1

0

我不熟悉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

请参阅：是否有“前一个兄弟”CSS 选择器？

于 2016-08-07T18:22:59.260 回答