Существуют различные красоты избранного выбора онлайн, и я нашел много, но нет хорошего эффекта стиля. Поэтому я нашел эффект, похожий на поле выбора, сделанную с помощью UL LI. Я не буду говорить по глупости. Сначала я добавлю изображение, и эффект выглядит следующим образом:
Нажмите на тест, и список будет отображаться. Нажмите еще раз, скрыть список, выберите LI и замените контент в промежутке на содержание LI, и вы можете использовать JS для мониторинга изменений в SPAN, а затем выполнить ваш код. Эффекты следующие:
HTML -код выглядит следующим образом:
<div id = "type"> <pan> Типы инвестиций </span> <ul> <li> Фьючерсы </li> <li> Акции </li> <li> Опционы </li> </ul> </div> <div id = "kind"> <pan> Типы инвестиций </span> <ul> <li> Trends </li> <li> volatility </li> <li> <li> <li> arbitrage </li> </li> focection </li> arbitrage </li> </li> </li> arbitcrage </li> </li> arbitrage </li> </li> </li> </li> </li>. <li> Время </li> </ul> </div>
Код CSS выглядит следующим образом:
ul li {list-style: none;}. test {position: относительно; Плавание: осталось; Ширина: 120px; Высота: 40px; Лебь набивки: 11px; размер шрифта: 15px; высота линии: 40px; курсор: указатель; Граница: 1px sold #d2d2d2; граница-радий: 3PX; Право маржи: 20px; Схема: нет;}. Тест: до {позиция: абсолют; Справа: 13px; Верх: 18px; Ширина: 0; высота: 0; Содержание: ширина границы: 8px 8px 0 8px; пограничный стиль: твердый; Пограничный цвет: #D36969 прозрачный; -Вобкит-трансляция: преобразование .25s; -Моз-трансляция: преобразование .25s; -ms-транзиция: преобразование .25s; -О-транзиция: преобразование .25s; -О-транзиция: преобразование .25s; Переход: преобразование .25S;}. Тест: после {положения: абсолют; Справа: 15px; Верх: 18px; Ширина: 0; высота: 0; содержание: ""; ширина границы: 6px 6px 0 6px; пограничный стиль: твердый; Пограничный цвет: #FFF прозрачный; -Вебкит-транзиция: все .25s; -Моз-транзиция: все .25s; -Мас-транзиция: все .25s; -О-транзиция: все .25s; -О-транзиция: все .25s; Переход: все .25S;}. test.active: до {-webkit -transform: rotate (180deg); -Моз-трансформ: вращение (180deg); -ms-трансформация: вращение (180deg); -О-трансформирование: вращение (180deg); Преобразование: вращение (180deg); } .test.active: после {top: 20px; -Вебкит-трансформ: вращение (180deg); -Моз-трансформ: вращение (180deg); -ms-трансформация: вращение (180deg); -О-трансформирование: вращение (180deg); Преобразование: вращение (180deg); } .test .dropdown {position: Absolute; Справа: 0; слева: 0; дисплей: нет; Заполнение: 0; граница-радис: наследуя; Граница: 1px sold #d2d2d2; Box-Shadow: 2px 2px 5px rgba (0,0,0, .4);}. test.active .dropdown {display: block;}. Test .dropdown: до {position: Absolute; Справа: 13px; Внизу: 100%; Ширина: 0; высота: 0; содержание: ""; ширина границы: 0 8px 8px; пограничный стиль: твердый; Пограничный цвет: #D2D2D2 прозрачный;}. Тест .Dropdown: After {Position: Absolute; Справа: 15px; Внизу: 100%; Ширина: 0; высота: 0; содержание: ""; ширина границы: 0 6px 6px 6px; пограничный стиль: твердый; пограничный цвет: #ffff прозрачный;}. Тест .droddown li {float: left; Ширина: 129px; размер шрифта: 14px; -Вебкит-трансляция: все .3s ext-out; -Моз-трансляция: все .3s Easy-Out; -Мас-транзиция: все .3s ext-out; -О-транзиция: все .3s Easy-Out; Переход: все .3s Easy-Out; Text-Align: Center;}. Test .dropdown li: Первый в своем типе {Border-Radius: 3px 3px 0 0;}. Тест. Фон: #C43C3D;}Для двух псевдо-элементов: до и: после, вы можете проверить мой предыдущий блог.
Код JS выглядит следующим образом:
Функция выпадает (el) {this.dd = el; this.span = this.dd.children ('span'); this.li = this.dd.find ('ul.dropdown li'); this.val = '';} uprotdown.prototype.initevents = function () {var obj = this; obj.dd.on ('click', function (event) {$ (this) .togGleclass ('active'). Sibling (). removeClass ('active'); event.stoppropagation ();}); obj.li.on ('click', function () {var opt = $ (this); obj.val = opt.html (); if (obj.span.html () == obj.val) return; obj.span.html (obj.val); });Здесь выпадающий объект создается с использованием комбинации конструктора-прототипа. Объясняется режим комбинации конструктора-прототипа: атрибут записан в конструкторе, который представляет атрибуты, уникальные для каждого экземпляра, так что объект является конкретным; Метод написан вне конструктора, который должен представлять метод, разделяемый каждым экземпляром.
Но немного плохой способ здесь заключается в том, что макет HTML был ограничен.
Замечательное обмен темами: JavaScript выбор коробка
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.