我会有从一些遗留代码继承了导航栏 - 我试图让手机版单击菜单项时崩溃。
http://shitnavbar.brodiedigital.io/
如果调整窗口的大小和滚动超出页面的第一100vh将出现在汉堡菜单。
点击后会显示菜单项
单击菜单项将滚动您纠正区域的页面,但不会崩溃/关闭菜单
目前我使用jQuery的一些试图通过菜单上的目标只是一个单一的项目要做到这一点 - “自行车的,有点点的喜悦:
$('#_bikes').on('click', function(){
$('.menu').removeClass('active');
});
HTML的部分是
<div class="menu active">
<div class="menu_content d-flex flex-column align-items-center justify-content-center">
<ul class="menu_nav_list text-center">
<li><a href="#where">LOCATIONS</a></li>
<li><a href="#_bikes">BIKES</a></li>
<li><a href="#_concierge">CONCIERGE</a></li>
<li><a href="#_about">ABOUT</a></li>
<li><a href="#_enquire">ENQUIRE</a></li>
<li><a href="#_contact">CONTACT</a></li>
</ul>
</div>
</div>
jQuery是不是我的强项,但感觉有一点脑屁时刻在这里IM - 很简单的东西,我做错了。
有没有人有一个了解为什么点击自行车不从具有“菜单”类的div去掉类“活跃”?
你有_bikes
的ID,这就是为什么你的jQuery不工作没有元素。使用选择,将工作:
$('.menu_nav_list a').on('click', function(e){ // target all anchors in the menu nav list
e.preventDefault(); // prevent default action of link click
$(this).closest('.menu').removeClass('active'); // get the closest ancestor of the link that has a class of .menu
});
.active a {
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu active">
<div class="menu_content d-flex flex-column align-items-center justify-content-center">
<ul class="menu_nav_list text-center">
<li><a href="#where">LOCATIONS</a></li>
<li><a href="#_bikes">BIKES</a></li>
<li><a href="#_concierge">CONCIERGE</a></li>
<li><a href="#_about">ABOUT</a></li>
<li><a href="#_enquire">ENQUIRE</a></li>
<li><a href="#_contact">CONTACT</a></li>
</ul>
</div>
</div>
你的选择可能是这个问题,下面就为你的所有资产净值环节的工作
$('.menu_nav_list li a').on('click', function(){
$('.menu').removeClass('active');
});
您的网站具有操作错误。这是从这样的:
<script type="text/javascript">
$('#_bikes').on('click', function(){
$('.menu').removeClass('active');
});
</script>
当您运行jQuery代码,您需要包括链接到jQuery的文件,下面这段代码,现在你是tryint jQuery库已经加载之前运行jQuery代码。
而且也把它包装的东西等待文件准备就绪
<script type="text/javascript">
$(function() {
$('#_bikes').on('click', function(){
$('.menu').removeClass('active');
});
});
</script>
它也像你包括jQuery库两次,在两个不同的版本。 V3.2.1和v1.11.0
(另外,作为一个侧面说明,代码库可能是传统的,但该网站看起来非常光滑!)
在你的代码你上面使用。对()不正确,现在也瞄准元素
如果你想为目标的HREF你就需要把里面选择以下一个[HREF =“_自行车”],因为目前你正试图选择一个ID不是在你选择的HREF。
您需要将以下代码添加到您的JavaScript文件,如果你点击任意链接里面,你的资产净值将关闭菜单
$(document).on('click','.menu_nav_list a', function(){
$('.menu').removeClass('active');
});