CSS Only accordion - Как свернуть контент - PullRequest
Новая
       6

CSS Only accordion - Как свернуть контент

0 голосов
/ 10 ноября 2018

Я слежу за этим CodePen , чтобы создать чистый аккордеон css. Мне нравится чехол в правой части экрана. Он открывает и закрывает вкладку содержимого с помощью ввода типа радио. Я хотел бы изменить его так, чтобы при нажатии на открытую вкладку содержимое могло сворачиваться. В настоящее время вы можете свернуть его, только открыв другую вкладку, функциональность которой я хотел бы сохранить. Но я также хочу иметь возможность закрыть его, нажав прямо на него. Только одна вкладка должна быть открыта за один раз или вообще не открываться.

Я попытался добавить максимальную высоту по умолчанию, равную 0, к содержимому вкладки, как это, но на самом деле это мало что дало, и я считаю, что это избыточно: 

.tab input ~ .tab-content {
  max-height: 0;
}

/* :checked */
.tab input:checked ~ .tab-content {
  max-height: 100vh;
}

Есть предложения?

Редактировать: я понял, что причина, по которой я не могу свернуть это потому, что стандартное поведение переключателей не позволяет мне «снимать отметку» с них, просто нажимая на них. Но причина, по которой этот аккордеон работает так, как я хочу (закрывайте другие вкладки, когда одна открывается) состоит в том, что он использует радиовходы вместо входов флажков. Так что мое решение должно сохранить лучшее из обоих миров, возможно, с помощью javascript, чтобы отключить переключатели при нажатии. Тем не менее, я пытался сохранить это как чистый аккордеон CSS. Все еще в растерянности ...

1 Ответ

0 голосов
/ 10 ноября 2018

Это невозможно с чистым 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, свойство checked уже будет установлено в true. Поэтому, если у вас есть только слушатель onclick, checked всегда будет истинным, и вы вообще не сможете активировать радио. Таким образом, прослушиватель mousedown необходим перед щелчком, чтобы увидеть, радио уже проверено, чтобы вы могли правильно снять его, когда срабатывает событие click.

Гораздо проще понять, когда вы видите, так что вот скрипка, показывающая, что я имею в виду.

http://jsfiddle.net/d6uLqy0c/4/

...