Выпадающее меню semantic-ui не работает

Я пытаюсь создать меню с помощью Semantic-UI. Я не могу заставить выпадающие меню работать вообще. Я взял копию страницы Примеры меню и вытащил все, кроме многоуровневого меню, и поместил ее в отдельный файл. Только выпадающее меню не будет работать, хотя ошибок нет. Может ли кто-нибудь сказать мне, что я пропустил?

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Script-Type" content="text/jscript" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    
    <link rel="stylesheet" type="text/css" class="ui" href="#" onclick="location.href='http://semantic-ui.com/build/packaged/css/semantic.min.css'; return false;">
    <link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://semantic-ui.com/stylesheets/semantic.css'; return false;">  
    <script src="http://semantic-ui.com/javascript/library/jquery.min.js"></script>
    <script src="http://semantic-ui.com/javascript/library/history.js"></script>
    <script src="http://semantic-ui.com/javascript/library/easing.js"></script>
    <script src="http://semantic-ui.com/javascript/library/ace/ace.js"></script>
    <script src="http://semantic-ui.com/javascript/library/tablesort.js"></script>
    <script src="http://semantic-ui.com/javascript/library/waypoints.js"></script>
    <script src="http://semantic-ui.com/build/packaged/javascript/semantic.min.js"></script>
    <script src="http://semantic-ui.com/javascript/semantic.js"></script>
  </head>
  <body class="menu" >
    <div class="ui tiered menu">
      <div class="menu">
        <a class="active item">
          <i class="users icon"></i>
          Friends
        </a>
        <a class="item">
          <i class="grid layout icon"></i> Browse
        </a>
        <a class="item">
          <i class="mail icon"></i> Messages
        </a>
        <div class="right menu">
          <div class="item">
            <div class="ui icon input">
              <input type="text" placeholder="Search...">
              <i class="search icon"></i>
            </div>
          </div>
          <div class="ui dropdown item">
            More <i class="icon dropdown"></i>
            <div class="menu">
              <a class="item"><i class="edit icon"></i> Edit Profile</a>
              <a class="item"><i class="globe icon"></i> Choose Language</a>
              <a class="item"><i class="settings icon"></i> Account Settings</a>
            </div>
          </div>
        </div>
      </div>
      <div class="ui sub menu">
        <a class="active item">Search</a>
        <a class="item">Add</a>
        <a class="item">Remove</a>
      </div>
    </div>

  </body>
</html>

Ответы

Ответ 1

Вам нужно инициализировать выпадающий список следующим образом:

$('.ui.dropdown')
  .dropdown();

Дополнительная информация ЗДЕСЬ

Ответ 2

Один из способов - это JS, где вам нужно инициализировать script. Другой способ - добавить класс "простой" в раскрывающийся список

<div class="ui simple dropdown item">

Ответ 3

Как уже упоминалось, вы можете:

Инициализируйте свое раскрывающееся меню с помощью Javascript или
Используйте класс simple.

Существует одно очень важное различие между этими двумя способами: с использованием класса simple, вам не требуется Javascript для семантического интерфейса для раскрывающегося списка. Класс simple использует селектор :hover.

Обратите внимание, что использование класса simple (не инициализация Javascript) не даст вам приятных эффектов выпадающего списка.

Таким образом, следующий код отобразит выпадающее меню без семантико-пользовательского Javascript на вашей странице:

<div class="ui simple dropdown item">

Ответ 4

Если вы инициализируете с помощью $('.ui.dropdown').dropdown();, также убедитесь, что ссылки на страницы dropdown.js

Ответ 5

если данные ответы не сработали для вас, убедитесь, что вы не используете bootstrap вместе с семантикой ui

Ответ 6

он работал со мной, когда я добавил функциональную строку выше

    <script> 
     $(document).ready(function(){
          $('.ui.dropdown') .dropdown();
    });
    </script>

Ответ 7

Краткое примечание:

Если раскрывающийся список не отображается, и Bootstrap был загружен на той же странице с помощью semantic-ui, то обязательно загрузите библиотеку semantic js после начальной загрузки.

Это происходит потому, что как bootstrap, так и semantic-ui имеют одинаковый метод .dropdown(), используемый для отображения выпадающих меню. Тем не менее, последняя библиотека, которая будет загружена между semantic-ui и bootstrap, переопределит все другие существующие методы .dropdown().