Раскрывающийся список Semantic-ui не работает

У меня проблема с интеграцией выпадающего меню в моей HTML-форме. Я пробовал все, что я могу сделать, и то, что я нашел в интернете, но это все еще не работает. Я обнаружил, что этот код работает правильно на JSFiddle. Пути сценария прекрасны, и сценарии загружены правильно.

Я что-то пропустил?

<html>
  <head>
      <meta charset="UTF-8">
      <link href="../semantic/packaged/css/semantic.min.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="../semantic/packaged/javascript/semantic.min.js"></script>
  <script>
    $('.ui.dropdown').dropdown();
  </script>
  </head>
  <body>
      <form class="ui form segment" style="width:400px; margin:auto;" method="POST" action="register_do.php">
    <div class="field">
      <label>학년</label>
      <div class="ui fluid dropdown selection">
        <input type="hidden" name="grade">
        <div class="default text">학년</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item" data-value="10">고1</div>
          <div class="item" data-value="11">고2</div>
          <div class="item" data-value="12">고3</div>
        </div>
      </div>
    </div>
    <div class="ui buttons">
              <button class="ui red submit button">등록</button>
              <div class="or"></div>
              <div class="ui button" onClick="history.back();">취소</div>
          </div>
      </form>
  </body>
</html>
8
html jquery semantic-ui

3 ответов

положить 

<script>
    $('.ui.dropdown').dropdown();
</script>

прямо перед закрывающим тегом </body> тег. Вы запускаете раскрывающийся скрипт перед этими элементами $('.ui.dropdown') даже существуют в DOM, поэтому не к чему прикрепляться.

14

попробуйте написать так:

$(document).ready(function() {
    $('.ui.dropdown').dropdown();
});

ваш скрипт находится поверх тега body, поэтому вам нужно проверить, готов ли DOM. функция ready () сначала проверяет, готов ли DOM, а затем запускает скрипт.

2

эта ошибка также возникает, если вы используете пользовательскую тему для элемента меню под коллекции в theme.config но не предоставляйте фактический файл переопределения для переменных и переопределений в папке темы - даже в виде пустых файлов. Ошибка js не отображается, но раскрывающийся список не работает. Убедитесь, что у вас есть все файлы переопределения или замените только элементы, которые вы действительно хотите использовать из своей пользовательской темы в theme.config.

0