#jquery #drop-down-menu #bootstrap-4 #scrollto #scrollspy
#jquery #выпадающее меню #bootstrap-4 #scrollto #scrollspy
Вопрос:
Я использую bootstrap 4 и у меня есть выпадающее меню, и у меня есть скрипт для scrollspy и scrollto. Когда я нажимаю, чтобы запустить выпадающее меню, консоль показывает следующую ошибку:
jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: http://example.com
at Function.ga.error (jquery.min.js:2)
at ga.tokenize (jquery.min.js:2)
at ga.select (jquery.min.js:2)
at Function.ga [as find] (jquery.min.js:2)
at r.fn.init.find (jquery.min.js:2)
at new r.fn.init (jquery.min.js:2)
at r (jquery.min.js:2)
at HTMLAnchorElement.<anonymous> (scripts.js:27)
at HTMLAnchorElement.dispatch (jquery.min.js:3)
at HTMLAnchorElement.q.handle (jquery.min.js:3)
Вот содержимое scripts.js:
$(document).ready(function() {
$(".nav-link,.dropdown-item").click(function() {
var t = $(this).attr("href");
$('.active').not('.carousel-item.active').removeClass('active');
$("html, body").animate({
scrollTop: $(t).offset().top - 50
}, {
duration: 1e3,
});
$('body').scrollspy({ target: '#navbar-example',offset: $(t).offset().top });
$(this).parent().addClass('active');
return false;
});
});
Строка 27, вызываемая в консоли, является:
scrollTop: $(t).offset().top - 50
Привязка, с которой у него проблема, — это ссылка href, используемая для элемента верхнего уровня в выпадающем списке — вот html:
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Compute</a>
Чего я не понимаю?
Заранее спасибо за ваше руководство.
Ответ №1:
Демонстрационный codepen может быть действительно полезен. В любом случае, пока ошибка, которую я вижу, находится в этой строке:
var t = $(this).attr("href");
Вы сохраняете атрибут «href» выбранного элемента в переменной «t». Значение «href» сохраняется только в виде строки. итак, «t» — это просто строка, а не элемент jquery. Вот почему в нем нет функции offset () или других доступных функций jquery.
Я думаю, вы имели в виду сохранить сам элемент при нажатии. Для этого вам нужно сохранить только элемент, подобный этому:
var t = $(this);
Теперь эта буква «t» представляет выбранный элемент, обернутый функциональными возможностями jquery ($). Вы можете использовать «t» в любом месте, где вам нужно, вместо $ (this). Например, в строке 27 :
scrollTop: t.offset().top - 50
Если это все еще не работает, пожалуйста, обновите свой пост ссылкой codepen / jsfiddle, чтобы я мог копать дальше.
Комментарии:
1. Спасибо за это — однако — пока ошибка не возникла — плавная прокрутка перестала работать. Я собрал быстрый codepen. Если вы нажмете на навигационную ссылку «вычислить», вы увидите ошибку в консоли. Вот ручка: codepen.io/steveshead/pen/wONPym
2. Кажется, что с моим вышеупомянутым изменением прокручивается плавно, и содержимого достаточно для прокрутки. Вот мое перо , отличающееся от вашего.
3. Спасибо, но проблема не в прокрутке. Работают как scroll, так и scrollspy. Как я упоминал выше, без вашего редактирования нажмите на ссылку «вычислить», затем перейдите в консоль и проверьте сообщение об ошибке. Я обновлю свое перо, чтобы включить содержимое для прокрутки.