Раскрывающийся список на моем веб-сайте не открывается на мобильных устройствах. Я следил за множеством советов и приемов, опубликованных в Интернете, но все еще не могу найти обходной путь!

Это мой html:

<nav id="nav-menu-container">
   <ul class="nav-menu">
     <li class="dropdown" data-dropdown="dropdown" >
        <button style="padding: 0 8px 10px 8px; font-face: sans-serif;color:#fff; font-weight: 700;font-size: 13px;text-transform: uppercase;opacity: 1;background-color: Transparent;border: 0pt" data-toggle="collapse" >About</button>
           <ul class="dropdown-menu" style="padding: 0 8px 10px 8px; width: 15px;font-face: sans-serif;color:#fff; font-weight: 700;font-size: 13px;text-transform: uppercase;opacity: 1;background-color: Transparent;border: 0pt">
              <li><a style="color:#fff" tabindex="-1" href="{{ url_for('main.about') }}#who">About Us</a></li>
              <li><a style="color:#fff" tabindex="-1" href="{{ url_for('main.about') }}#team">Team</a></li>
              <li><a style="color:#fff" tabindex="-1" href="{{ url_for('main.faq') }}">FAQ</a></li>
              <li><a style="color:#fff" tabindex="-1" href="https://www.youtube.com/watch?v=OZLNAHYpL14">Demo</a></li>
          </ul>
    </li>
  </ul>
</nav>

CSS импорт:


  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

JS:

<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="lib/bootstrap/js/bootstrap-dropdown.js"></script>

0
sonaam1234 22 Окт 2019 в 13:30
2
Вы включили JQuery?
 – 
Soheb
22 Окт 2019 в 13:31
JQuery необходим для начальной загрузки.
 – 
Sukrut Bam
22 Окт 2019 в 13:33
Я использовал <script src="lib/jquery/jquery.min.js"></script> <script src="lib/jquery/jquery-migrate.min.js"></script>
 – 
sonaam1234
22 Окт 2019 в 13:46
Проверьте, правильно ли ваша ссылка связана или нет
 – 
Kiran Mistry
22 Окт 2019 в 14:02

1 ответ

Лучший ответ

Добавьте JQuery в раздел скриптов. Для нормальной работы требуется начальная загрузка.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
0
MohcinBN 22 Окт 2019 в 13:36
Когда я использую это, панель навигации не видна на мобильном устройстве и всегда открыта на рабочем столе.
 – 
sonaam1234
22 Окт 2019 в 13:52
Я думаю, что что-то не так с панелью навигации, если я удалю id=navbar-menu-container, раскрывающийся список появится вверху (а не слева) и откроется на мобильном телефоне.
 – 
sonaam1234
22 Окт 2019 в 14:16
Я использую Bootstrap v4.2.1
 – 
sonaam1234
22 Окт 2019 в 14:18
Можете ли вы дать мне консольные сообщения.. я думаю, что-то в позиции вашего элемента.. может быть, щелчок не был нацелен на меню..
 – 
MohcinBN
22 Окт 2019 в 14:21
Ничего не печатается на консоли. Я не могу добавить сюда css, но он выбран из bootstrapmade.com/bizpage-bootstrap-business-template
 – 
sonaam1234
22 Окт 2019 в 14:28