1

私は自分のウェブサイトで textangular のツールバーとエディターを使用しています。私のページにはいくつかのエディターがあり、各エディターには独自のツールバーがあります。私の目的は、エディター 1 がフォーカスされると、ツールバー 1 が表示され、他のツールバーが非表示になります。どうすれば管理できますか。以下のリンクを見ましたが、このソリューションは、すべてのツールバーを1つずつではなく、相互に非表示および表示するために機能するため、役に立ちません。 注ページの読み込み時にすべてのツールバーを非表示にしたい。より明確にするために、質問に1つの画像を添付します。

ここに画像の説明を入力 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:focus ~ .toolbar

参照: 「前の兄弟」CSS セレクターはありますか?

于 2016-08-07T18:22:59.260 に答える