Раскрывающийся спойлер нарушает многоуровневую нумерацию — как грамотно исправить?

Question

[Глойнус Алеос]

Сделал многоуровневый список.
Обернул подпункты в спойлер. Теперь, если развернуть спойлер, в списке нарушается нумерация, а если свернуть — восстанавливается.
Модель: https://codepen.io/anon/pen/BOzdXR
Найдено решение: https://codepen.io/anon/pen/JaKrQb
Но вопрос: можно ли решить проблему более универсальным способом, вместо того, чтобы пописывать стили каждому уровню отдельно?

Answer 1

[Stalker_RED]

Ваш спойлер делает display:none и нумерация пересчитывается.
Вместо этого можно менять visibility, opacity или размеры (высоту) строк.

Comments

[Глойнус Алеос]

Если так сделать, то его содержимое не будет скрыто от выделения. Можно будет выделить всё или протащить мышкой и содержимое внутри спойлера тоже будет захвачено.

[Stalker_RED]

Глойнус Алеос, user-select: none;?

[Глойнус Алеос]

Stalker_RED, так?: https://codepen.io/anon/pen/QVEaxg — это можно назвать грамотным решением?

[Stalker_RED]

Глойнус Алеос, я же не знаю подробностей вашего ТЗ. Если все работает как задумано, то все правильно.
Кнопке, кстати, тоже можно сделать user-select: none;

[Глойнус Алеос]

Stalker_RED, благодарю.