Ошибка Scrollto jquery при нажатии на выпадающее меню Bootstrap 4

#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. Как я упоминал выше, без вашего редактирования нажмите на ссылку «вычислить», затем перейдите в консоль и проверьте сообщение об ошибке. Я обновлю свое перо, чтобы включить содержимое для прокрутки.