单击 Bootstrap 4 下拉菜单时出现 Scrollto jquery 错误

Question

我正在使用 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>

我错过了什么？

提前感谢您的指导。

Answer 1

演示代码笔可能真的很有帮助。无论如何，到目前为止我看到的错误是在这一行：

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 链接更新您的帖子，以便我可以进一步挖掘。