Выпадающее меню Bootstrap 3.3.7 не работает на мобильных устройствах

#javascript #html #css #twitter-bootstrap-3 #drop-down-menu

#javascript #HTML #css #twitter-bootstrap-3 #выпадающее меню

Вопрос:

Мы заполняем наши выпадающие списки из файла JSON, но по какой-то причине он не работает на мобильных устройствах. За исключением привязок li, я следую рекомендациям из документации Bootstrap 3.3.7: https://getbootstrap.com/docs/3.3/components/#dropdowns .

Я также добавил это, но проблема сохраняется на мобильных устройствах:

 $('.dropdown-backdrop').css({display: 'none'});
 

Что может быть причиной этого? Вот мой выпадающий код.

 <div class="dropdown w-100 open" id="attrib">
  <button data-device="Umbra 501" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Economy
    <span class="glyphicon glyphicon-menu-down"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a data-filter-dropdown="Small">Small</a></li>
    <li><a data-filter-dropdown="Medium">Medium</a></li>
    <li><a data-filter-dropdown="Large">Large</a></li>
    <li><a data-filter-dropdown="Xlarge">Xlarge</a></li>
  </ul>
</div>
 

Обновления
Этот сайт — AEM 6.5. Также я заметил, что все выпадающие списки имеют одинаковый идентификатор («атрибут»).

Комментарии:

1. Пожалуйста, проверьте, добавлен ли jquery перед загрузкой js

2. Я подтвердил, что jQuery загружается до начальной загрузки.