Скрыть дочерний элемент flexbox и снова сделать его видимым
У меня есть простой сценарий flexbox - родитель, несколько элементов и т.д.
Мне нужно выборочно скрыть один из дочерних элементов, что я и делаю с помощью display: none.
Однако позже мне нужно восстановить видимость элемента, но как? I Это не flex, и я не думаю, что это inline-flex, так что же это?
Я не могу использовать display: unset, так как он поддерживается умеренно. Есть идеи?
.container {
margin: 40px;
}
.flexbox-container {
display: flex;
}
.flexbox-item {
flex: 1 0 0;
height: 40px;
background-color: aqua;
}
.flexbox-item:not(:first-child) {
margin-left: 20px;
}
.hide-item {
display: none;
}<div class = "container">
<div class = "flexbox-container">
<div class = "flexbox-item">child</div>
<div class = "flexbox-item hide-item">child</div>
<div class = "flexbox-item">child</div>
</div>
</div>div - это блоки, поэтому display: "block"
Как вы это скрываете, можете ли вы поделиться сценарием ситуации в реальном времени здесь?
Ответы 2
Просто сбросьте его обратно на display:block
.container {
margin: 40px;
}
.flexbox-container {
display: flex;
}
.flexbox-item {
flex: 1 0 0;
height: 40px;
background-color: aqua;
}
.flexbox-item:not(:first-child) {
margin-left: 20px;
}
input:checked+.flexbox-container>.hide-item {
display: block;
}
.hide-item {
display: none;
}<div class = "container">
<label>Toggle This</label>
<input type = "checkbox">
<div class = "flexbox-container">
<div class = "flexbox-item">child</div>
<div class = "flexbox-item hide-item">child</div>
<div class = "flexbox-item">child</div>
</div>
</div>Так просто! Я думал, что установка обратного режима отображения на блок переопределит статус div как дочернего элемента гибкого элемента, но, похоже, это работает.
@JohnOhara даже встроенный блок будет работать или тоже initial (по теме: stackoverflow.com/a/55496749/8620333)
.flexbox-container есть display: flex.
Таким образом, все дочерние элементы .flexbox-container являются flex-потомками.
Если вы добавите .hide-item к одному из этих дочерних элементов, этот элемент теперь будет иметь display: none.
Если вы удалите .hide-item из этого дочернего элемента, он снова станет гибким дочерним элементом.
Пример:
const hiddenChild = document.querySelector('.hide-item');
hiddenChild.classList.remove('hide-item');
Возможный дубликат Переключить отображение: нет стиля с помощью JavaScript