Я работаю над проектом, который я начал строить на начальной загрузке 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 Uncaught DOMException: Не удалось выполнить 'querySelector' для 'Document': 'http://localhost:8000/user/panel' не является допустимым селектором.
at 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); as 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 }} {{ 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;
}