我并不是真正的 jquery 专家,所以请耐心等待。我已经“谷歌搜索”但找不到任何解决方案。 这是代码:
<div id="navbarResponsive" class="collapse navbar-collapse col-auto">
<ul id="primary-menu" class="navbar-nav text-uppercase">
<li id="menu-item-1725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1725 nav-item"><a href="#page-top" class="nav-link js-scroll-trigger">Home</a></li>
<li id="menu-item-1739" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-1739"><a rel="nav-link js-scroll-trigger" href="#services" class="nav-link js-scroll-trigger">Services</a></li>
<li id="menu-item-1735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1735 nav-item"><a href="#portfolio" class="nav-link js-scroll-trigger">Portfolio</a></li>
<li id="menu-item-1736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1736 nav-item"><a href="#about" class="nav-link js-scroll-trigger">About</a></li>
</ul>
这是脚本/片段的部分:
(function($) {
"use strict"; // Start of use strict
$('a.nav-link.js-scroll-trigger').click(function(e) {
console.log(e);
});
$('.js-scroll-trigger').on('click', 'a', function(e) {
console.log(e);
});
$('li').find('a.js-scroll-trigger').click(function(e) {
console.log(e);
});
$('a').click(function(e) {
console.log(e);
});
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
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;
}
}
});
问题是它只触发 $('a')
并忽略其余的选择器。
我尝试在浏览器上检查它:
控制台 - https://www.screencast.com/t/sikIcYY1J
使用调试器的源代码 -- https://www.screencast.com/t/TgbNhIb1usy
它似乎瞄准了正确的选择器,但未能触发如上所示的条件。除非我将 $('a')
作为唯一条件,否则我的平滑滚动将不再起作用。前几天还可以用,不知道怎么回事。一定是有什么东西触发了它不工作。有人可以启发我吗?非常感谢您的回答,非常感谢...
最佳答案
将target.length
更改为$(target).length
添加e.preventDefault();
修复var target = this.hash;
但是,你为什么需要这个呢? if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
您所需要的就是这个:
$(function() {
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
e.preventDefault();
var target = this.hash;
if ($(target).length) {
$('html, body').animate({
scrollTop: ($(target).offset().top - 54)
}, 1000, "easeInOutExpo");
return;
}
});
});
<小时/>
无论如何,这是对您的脚本的修复。
$(function() {
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
e.preventDefault();
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");
console.log(target);
return;
}
}
});
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="navbarResponsive" class="collapse navbar-collapse col-auto">
<ul id="primary-menu" class="navbar-nav text-uppercase">
<li id="menu-item-1725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1725 nav-item"><a href="#page-top" class="nav-link js-scroll-trigger">Home</a></li>
<li id="menu-item-1739" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-1739"><a rel="nav-link js-scroll-trigger" href="#services" class="nav-link js-scroll-trigger">Services</a></li>
<li id="menu-item-1735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1735 nav-item"><a href="#portfolio" class="nav-link js-scroll-trigger">Portfolio</a></li>
<li id="menu-item-1736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1736 nav-item"><a href="#about" class="nav-link js-scroll-trigger">About</a></li>
</ul>
</div>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p>ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p id="services">ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwgv</p>
关于javascript - 即使使用正确的选择器,jquery click 事件也不会触发?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48741889/