DOMException：无法在“文档”上执行“ querySelector”：

Question

我正在一个项目上，我开始在Bootstrap 4.3.1上构建。

我为这种Javascript和html编码而发疯。

<a class="dropdown-item" href="{{ route('user.panel') }}">
    User panel
</a>

我在控制台中收到此错误。

  

SyntaxError：'http://localhost:8000/user/panel'不是有效的选择器

     

bootstrap.min.js：6未捕获的DOMException：无法对'Document'执行'querySelector'：'http://localhost:8000/user/panel'不是有效的选择器。       在Object.getSelectorFromElement（http://localhost:8000/themes/js/bootstrap.min.js:6:1466）       在http://localhost:8000/themes/js/bootstrap.min.js:6:46766       在Array.map（）       在更新时（http://localhost:8000/themes/js/bootstrap.min.js:6:46740）       在新的n（http://localhost:8000/themes/js/bootstrap.min.js:6:46381）

我发现它是由于下拉菜单而发生的，因为此错误，下拉菜单不起作用。我还检查了，如果我使用的是href =“ javascript：void（0）;”，href =“＃！”会发生错误，但是如果我使用没有href或href =“＃”的锚标记，那么它将正常工作。

注意：，我需要带有href =“ javascript：void（0）;的解决方案，因为地址链接中的href =”＃看起来并不漂亮，并且页面会滚动到顶部。 >

<ul class="navbar-nav">
    @guest
    <li class="navbar-item dropdown">
        <a href="#" class="nav-link" data-toggle="dropdown">Register/Login<i class="fas fa-sort-down"></i></a>
        <div class="dropdown-menu text-right m-2 position-absolute" style="width:300px;left:-111px;">
            <a href="{{ route('login') }}" class="btn btn-primary d-block m-3">Login</a>
            <span class="m-3">Are you new user?<a href="{{ route('register') }}" class="link-sign">Login</a></span>
        </div>
    </li>
    @else
        <li class="nav-item dropdown">
            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                {{ Auth::user()->first_name }}&nbsp;{{ Auth::user()->last_name }} <span class="caret"></span>
            </a>

            <div class="dropdown-menu dropdown-menu-left" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="{{ route('user.panel') }}">
                    User Panel
                </a>
                <a class="dropdown-item" href="#" id="logout-button">
                    {{ __('Logout') }}
                </a>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    @csrf
                </form>
            </div>
        </li>
    @endguest
</ul>

错误出现在下一行。

$('body').scrollspy({
    target: '#mainNav',
    offset: 50
});

script.js

(function($) {
    "use strict"; // Start of use strict

    // Smooth scrolling using jQuery easing
    $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: (target.offset().top - 54)
                }, 1000, "easeInOutExpo");
                return false;
            }
        }
    });

    // Closes responsive menu when a scroll trigger link is clicked
    $('.js-scroll-trigger').click(function() {
        $('.navbar-collapse').collapse('hide');
    });

    // Activate scrollspy to add active class to navbar items on scroll
    $('body').scrollspy({
        target: '#mainNav',
        offset: 50
    });

})(jQuery); // End of use strict

AOS.init({
    easing: 'ease-in-out-sine'
});

$('#logout-button').on('click', function(e) {
    e.preventDefault();
    $('#logout-form').submit();
});


$('#select').change(function() {
    var $selected = $(this).find(':selected');
    $('#description').html($selected.data('description'));
}).trigger('change');
$("#select").change(function() {
    var color = $(this).val();
    if (color == "laptop_repair") {
        $(".box").not(".laptop_repair").hide();
        $(".laptop_repair").show();
    } else if (color == "install_windows") {
        $(".box").not(".install_windows").hide();
        $(".install_windows").show();
    } else if (color == "backup") {
        $(".box").not(".backup").hide();
        $(".backup").show();
    } else if (color == "antivirus") {
        $(".box").not(".antivirus").hide();
        $(".antivirus").show();
    } else if (color == "magenta") {
        $(".box").not(".magenta").hide();
        $(".magenta").show();
    } else {
        $(".box").hide();
    }
});
getSelectorFromElement: function getSelectorFromElement(element) {
    var selector = element.getAttribute('data-target');

    if (!selector || selector === '#') {
        var hrefAttr = element.getAttribute('href');
        selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
    }

    return selector && document.querySelector(selector) ? selector : null;
}

Answer 1

错误来自Bootstrap的scrollspy组件，该组件明确指出：

  

Anchors（）是必需的，并且必须指向具有该ID的元素。

或

  

导航栏链接必须具有可解析的ID目标。例如，<a href="#home">home</a>必须与DOM中的某些内容相对应，例如   <div id="home">。

您有几种解决方案：

1. 将可滚动的t从#mainNav更改为更窄的内容，其中不包含.navbar-nav

2. 如果您想跟踪/间谍.navbar-nav内的链接，那么您需要破解scrollspy源或使用其他组件

3. 保留所有内容，但在锚点中使用有效的本地链接。