показать панель инструментов, когда редактор сфокусирован, а затем скрыть его

Question

Я использую панель инструментов и редактор textangular на своем веб-сайте. У меня есть один вопрос, который меня смутил. На моей странице у меня есть несколько редакторов, и у каждого редактора есть своя панель инструментов. При этом задача будет, когда сфокусирован редактор 1, отображается панель инструментов1 и другие панели инструментов. Когда редактор2 сфокусирован, отображается только панель инструментов2, а другие скрыты так. как я могу управлять им. Я видел ссылку ниже, но это решение просто работает для скрытия и отображения всей панели инструментов друг с другом не один за другим, так что это не полезно для меня. ПРИМЕЧАНИЕ Я хочу, чтобы все панели инструментов были скрыты при загрузке страницы. Я прикладываю одно изображение в своем вопросе, чтобы быть более ясным.

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

Answer 1

Я не знаком TextAngular, но в целом: Вы можете сделать это, используя только CSS с :focus псевдо-класса и смежного селектора родственного +.

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

См: Is there a "previous sibling" CSS selector?