CSS Only Accordion - Как свернуть содержимое
Я следую этому CodePen, чтобы создать чистый аккордеон css. Мне нравится корпус справа от экрана. Он открывает и закрывает содержимое вкладки с помощью ввода типа радио. Я хотел бы изменить его так, чтобы при нажатии на открытую вкладку содержимое могло сворачиваться. В настоящее время вы можете свернуть его, только открыв другую вкладку, и я бы хотел сохранить эту функцию. Но я также хочу закрыть его, щелкнув по нему напрямую. Одновременно должна быть открыта только одна вкладка или вообще ни одна.
Я попытался добавить максимальную высоту по умолчанию, равную 0, к содержимому вкладки, как это, но на самом деле это не помогло, и я считаю, что это избыточно:
.tab input ~ .tab-content {
max-height: 0;
}
/* :checked */
.tab input:checked ~ .tab-content {
max-height: 100vh;
}
Какие-либо предложения?
Обновлено: я понял, что причина, по которой я не могу его свернуть, заключается в том, что поведение переключателей по умолчанию не позволяет мне `` снять отметку '' с них, просто щелкнув по ним. Но причина, по которой этот аккордеон работает так, как я хочу (закрывайте другие вкладки, когда одна открывается), заключается в том, что он использует радиовходы вместо полей для флажков. Таким образом, в моем решении должно быть сохранено лучшее из обоих миров, возможно, с помощью javascript, чтобы снять отметку с переключателей при нажатии. Однако я пытался сохранить это как аккордеон на чистом CSS. Все еще в недоумении ...
Ответы 1
Это невозможно с чистым CSS. Вам понадобится javascript, чтобы изменить свойство checked на переключателе на false, если оно уже отмечено при нажатии на него.
Пример Javascript:
var radios = document.querySelectorAll('input[type = "radio"]');
for(i=0; i<radios.length; i++ ) {
radios[i].onmousedown = function() {
let checked = this.checked;
this.onclick = function() {
if (checked) {
this.checked = false;
}
}
}
}
Пример jQuery:
$('input[type = "radio"]').on('mousedown', function() {
let checked = this.checked;
$(this).on('click', function() {
if (checked) {
this.checked = false;
}
})
})
Принцип работы радиокнопок заключается в том, что они меняются только onclick, а не onmouseup, и к моменту запуска onclick для свойства checked уже будет установлено значение true. Так что, если у вас есть только слушатель для onclick, checked всегда будет истинным, и вы вообще не сможете активировать радио. Следовательно, прослушиватель mousedown необходим перед onclick, чтобы увидеть, проверено ли уже радио, чтобы вы могли правильно снять его при срабатывании события click.
Когда вы видите, это намного легче понять, поэтому вот рабочий пример, показывающая, что я имею в виду.
Я думаю, что ваше редактирование и реализация правильны. Вам понадобится совсем немного javascript, чтобы вы могли «снять отметку» с переключателя, когда он уже отмечен.