У меня есть эта сетка с 3 столбцами, и я хотел сделать так, чтобы, когда я нажимаю на один из элементов div, она опускалась на строку и охватывала всю строку, а также закрывалась снова, когда я нажимаю на нее снова . и я заставил это работать. но я хотел сделать так, чтобы, когда я открываю другой div, он закрывал все остальные, если они открыты? так что одновременно открыт только один? как бы мне это сделать?
1 one
2 two
3 three
4 four
5 five
6 six
7 seven
8 eight
9 nine
10 ten
Кроме того, у меня есть другие элементы div рядом с h1, в которых будет информация, но я хочу, чтобы они показывали только, расширился ли его родительский элемент div и охватил всю строку? поэтому я хочу изменить отображение со скрытого на блокировку, только ЕСЛИ оно было открыто. Я знаю, что мне нужно добавить или удалить класс HidsINFO, но, например, мне придется создать функцию для каждого div, чтобы сделать это?#gridALBUM {
margin: 50px auto;
max-width: 908px;
display: grid;
grid-gap: 0 4px;
grid-template-columns: repeat(3, 300px);
background-color: lightblue;
}
#gridALBUM > div {
border: 1px solid black;
display: flex;
}
.hidesINFO {
display: none;
}
.span {
grid-column: 1 / 4;
background-color: blue;
}
также, есть ли лучший способ написать приведенный ниже код? вместо того, чтобы иметь один и тот же точный код, но с разными идентификаторами для каждого элемента управления? потому что мне придется добавить больше элементов div, и я не хочу копировать и вставлять каждую функцию, когда они на самом деле делают одно и то же, только с разными элементами
function toggles1() {
document.getElementById("one").classList.toggle("span"); }
function toggles2() {
document.getElementById("two").classList.toggle("span"); }
function toggles3() {
document.getElementById("three").classList.toggle("span"); }
function toggles4() {
document.getElementById("four").classList.toggle("span"); }
function toggles5() {
document.getElementById("five").classList.toggle("span"); }
function toggles6() {
document.getElementById("six").classList.toggle("span"); }
function toggles7() {
document.getElementById("seven").classList.toggle("span"); }
function toggles8() {
document.getElementById("eight").classList.toggle("span"); }
function toggles9() {
document.getElementById("nine").classList.toggle("span"); }
function toggles10() {
document.getElementById("ten").classList.toggle("span"); }
Использую ли я siblings(), чтобы поставить лайк и удалить селекторы? как это сработает?
function toggles2() {
document.getElementById("two").classList.toggle("span");
document.getElementById("two").siblings().classList.remove("span");
document.getElementById("two").siblings().child[1].classList.remove("hidesINFO");}
Подробнее здесь: https://stackoverflow.com/questions/790 ... d-have-all
