在@UmurDinçer编写解决方案时,我想出了自己的一个方法...
我有一个充满锚链接的菜单,我从以下菜单获得:https://codepen.io/jpag82/pen/jAZjvV-我的代码如下:
<div class="cnt__nav">
<nav>
<ul>
<li><a href="#head" class="active">Home</a></li>
<li><a href="#main">About</a></li>
<li><a href="#foot">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
我将此菜单与一个平滑的滚动脚本结合在一起,该脚本是从https://jsfiddle.net/cse_tushar/Dxtyu/141/中获得的>
这两个脚本都可以正常工作,除了使用锚链接之外,我都没有涉及任何一个脚本。我想做的是关闭菜单或单击菜单项时运行toggleClass('is-open')
。
我在JS上添加了一条我认为可以使用的行,但是当我添加平滑滚动时,此功能停止了工作(仅在.cnt__nav a
选择器上:]
$(document).ready(function() { $('#cnt__nav-trigger, .cnt__nav, .cnt__nav a').click(function() { $('.nav-trigger').toggleClass('is-open'); $('.cnt__nav').toggleClass('is-open'); $('.cnt__nav a').toggleClass('is-open'); }); });
我猜测平滑滚动中的
click
功能将覆盖链接的行为,导致$('.cnt__nav a').toggleClass('is-open');
停止工作。
有没有一种方法可以将这两个脚本网格化在一起,所以当单击链接时,菜单会关闭?
当前的JS:
$(document).ready(function() { $('#cnt__nav-trigger, .cnt__nav, .cnt__nav a').click(function() { $('.nav-trigger').toggleClass('is-open'); $('.cnt__nav').toggleClass('is-open'); $('.cnt__nav a').toggleClass('is-open'); }); }); $(document).ready(function () { $(document).on("scroll", onScroll); //smoothscroll $('a[href^="#"]').on('click', function (e) { e.preventDefault(); $(document).off("scroll"); $('a').each(function () { $(this).removeClass('active'); }) $(this).addClass('active'); var target = this.hash, menu = target; $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top+2 }, 500, 'swing', function () { window.location.hash = target; $(document).on("scroll", onScroll); }); }); }); function onScroll(event){ var scrollPos = $(document).scrollTop(); $('.cnt__nav a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('.cnt__nav ul li a').removeClass("active"); currLink.addClass("active"); } else { currLink.removeClass("active"); } }); }
当前HTML:
<!-- MENU -->
<div class="cnt__nav">
<nav>
<ul>
<li><a href="#head" class="active">Home</a></li>
<li><a href="#main">About</a></li>
<li><a href="#foot">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<!-- NAV TRIGGER -->
<div id="cnt__nav-trigger">
<div class="nav-trigger">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
谢谢,乔希
我有一个充满锚链接的菜单,我从以下菜单获得:https://codepen.io/jpag82/pen/jAZjvV-我的代码如下:
在@UmurDinçer编写解决方案时,我想出了自己的一个方法...
删除$('.cnt__nav a').toggleClass('is-open');
,看起来像:
$(document).ready(function() { $('#cnt__nav-trigger, .cnt__nav').click(function() { $('.nav-trigger').toggleClass('is-open'); $('.cnt__nav').toggleClass('is-open'); }); });
然后我在第5行修改了JS,我告诉它删除了
is-open
类-看起来像这样:$('.cnt__nav a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('.cnt__nav a').removeClass("is-open active"); currLink.addClass("active"); } else { currLink.removeClass("active"); } });
这解决了该问题,因为它删除了
is-open
类,这将导致菜单关闭。
@@UmurDinçer提出了解决方案...只需从选择器中删除.cnt__nav
。将其张贴在这里,以便我选择它作为答案。
在@UmurDinçer编写解决方案时,我想出了自己的一个方法...
@@UmurDinçer提出了解决方案...只需从选择器中删除.cnt__nav
。将其张贴在这里,以便我选择它作为答案。