Bootstrap JS Modal and Menu Toggle Dispute

Question

TL; DR Изменение порядка (или удаления) Bootstrap JS влияет на работу модуля.

Я искал высоко и низко для ответа на этот конкретный вопрос, но ничего не исправило ситуацию. Идет.

На моей странице есть раскрывающееся меню «гамбургер» с левой стороны и кнопка регистрации (для вызова модального) с правой стороны с помощью Bootstrap. Вот порядок JS я вызываю в нижней части моего footer.php:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://apis.google.com/js/platform.js" async defer></script> 
<script src="https://apis.google.com/js/api.js"></script> 
<script src="<?php bloginfo('template_directory'); ?>/assets/js/main.js"></script> 
<script src="<?php bloginfo('template_directory'); ?>/assets/js/bootstrap.min.js"></script> 

Изменяя порядок JS, я могу получить один из двух модулей, работающих. Лемме объясните:

Ситуация № 1 (с использованием приведенного выше заказа): Я нажимаю меню мобильных гамбургеров и мониторы вниз, но при повторном нажатии он отказывается вернуться (вы можете видеть, что он слегка двигается, но он все еще не работает). Я читал, что это проблема с несколькими jQuery/js. Итак, я пошел дальше и проверил мой заголовок и footer.php, и никаких других javascript-сценариев загрузки не вызывали. ОДНАКО, когда я удаляю bootstrap.min.js, меню переключается как шарм. Примечание. Модальное всплывающее окно отлично работает.

Ситуация № 2: Перемещая bootstrap.min.js в начало сценариев, меню работает так, как ожидалось, но теперь кнопка регистрации при нажатии будет отображать модальное короткое время и затем исчезает. Эти проблемы могут быть решены путем удаления bootstrap.min.js еще раз ....

Так что, на мой вопрос, вызывает ли bootstrap.js любой из этих других скриптов? B/c проблема перестает существовать после удаления файла!

Спасибо всем за помощь.

Answer 1

Попробуйте переключить порядок двух последних файлов сценария на это. Кажется, что bootstrap переопределяет ваш собственный файл сценария, потому что он объявлен ниже. как только ваш Вытащите самонастройки, кажется, работает как шарм

<script src="<?php bloginfo('template_directory'); ?>/assets/js/bootstrap.min.js"></script> 
<script src="<?php bloginfo('template_directory'); ?>/assets/js/main.js"></script> 

Во-вторых, вы используете самозагрузки-CSS для своих классов, но вы используете main.js для переключая меню.

так оба скрипта сталкиваясь друг с другом либо вы должны изменить свой класс, который вы звоните в main.js или вы должны использовать bootstrap.js полностью как в загрузчике он вызывает кнопку с классом =» navbar-toggle ", чтобы переключить меню , если вы используете somethig как $ (". navbar-toggle ") в вашем main.js, тогда они будут мешать друг другу.

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

Найдите фрагмент в bootstrap.js и прокомментируйте его.