Задать вопрос
dima9595
@dima9595
Junior PHP
css

Не работает dropdown в SemanticUI?

Начал сегодня использовать Semantic UI, но наткнулся на проблему: Не работают выпадающие списки (которые через div).

<div class="ui selection dropdown">
            <input type="hidden" name="gender">
            <i class="dropdown icon"></i>
            <div class="default text">Все</div>
            <div class="menu">
                <div class="item" data-value="1">Male</div>
                <div class="item" data-value="0">Female</div>
            </div>
        </div>


Все скрипты и стили подключены и работают без проблем.

PS: К сожалению тега нужного не было, так что выставил "CSS".
  • Вопрос задан
  • 805 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Проверьте действительно ли все стили и скрипты у вас последней версии и работают без проблем - быть может вы что-то забыли подключить (например без transition.css могут быть ошибки), или пытаетесь создать dropdown из еще не существующего dom-элемента? Работающий пример есть тут.
Ответ написан
2 комментария
2 комментария
@nixxx
Нужно инициализировать dropdown, когда необходимые DOM-элементы существуют. Вот работающий пример.

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js"></script>
  </head>
  <body>
    <div class="ui selection dropdown">
      <input name="gender" type="hidden">
      <i class="dropdown icon"></i>
      <div class="default text">Gender</div>
      <div class="menu">
        <div class="item" data-value="1">Male</div>
        <div class="item" data-value="0">Female</div>
      </div>
    </div>
    <script>
      $('.ui.dropdown').dropdown();
    </script>
  </body>
</html>


Или же использовать simple класс
<div class="ui simple dropdown item">
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Смонтировать видео
23 нояб. 2024, в 01:31
1000 руб./за проект
Настроить сайт
23 нояб. 2024, в 00:16
2000 руб./за проект
Разобрать текущий ETL-процесс
22 нояб. 2024, в 23:55
3000 руб./за проект
Ещё заказы