Выбор Europass (HTML, CSS, jQuery)
Было время, когда мне нужно было поработать над выбором HTML, который был похож на онлайн-резюме Europass. Поскольку тег select нельзя стилизовать, мне пришлось пойти другим путем.
Это сложнее, чем предыдущий, но не волнуйтесь, я вернусь к более простому.
Что в ней интересного? Что ж, есть несколько довольно интересных вещей. Во-первых, есть возможность поработать над этим, например, изменить стиль, другое - когда вы выбираете вариант, который вам нравится, он принимает боковой заголовок, например «A1» в моем образце, вместе с подзаголовком, выделенным жирным шрифтом. Еще несколько вещей, но теперь ваша очередь ими воспользоваться.
Сначала HTML-код выбранного
Итак, я создал список ul, который включает div с именем «input» и двумя значками, один из них - стрелка вниз (я заменил буквой «v»), а другой - значок закрытия (я заменил буквой «x») , то есть еще один список ul, в котором есть раскрывающееся содержимое. Идея состоит в том, что внутри списка ul есть h5 (боковой заголовок) с уникальным классом и диапазон (подзаголовок) с уникальным классом, который я объясню в части jQuery.
CSS-код select.
Итак, идея состоит в том, чтобы после стилизации входные данные и параметры выглядели с границами, цветами и другими вещами, такими как некоторые классы. Класс show, который запускается с помощью jQuery при нажатии, класс explore и другие классы.
Код Javascript для select.
Итак, происходит то, что при нажатии на ввод запускается класс исследования в «стилизованном раскрывающемся списке - секунда», который заставляет его не отображать, чтобы сделать его видимым, что означает, что параметры отображаются сейчас.
Следующее, что при нажатии на один параметр, он сохранит боковой заголовок и подзаголовок в переменной и будет добавляться к вводу при его нажатии, он удалит значок со стрелкой вниз и отобразит значок закрытия, который, если вы нажмете на него, очистит вход в его суть.
Я надеюсь, что однажды это вам пригодится, есть ссылка на код, чтобы проверить, как это работает https://codepen.io/lbnt/pen/MWwzwYV.
