从导航栏删除一个类,使其崩溃时被点击导航栏项目

问题描述 投票:1回答:4

我会有从一些遗留代码继承了导航栏 - 我试图让手机版单击菜单项时崩溃。

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去掉类“活跃”?

javascript jquery html
4个回答
0
投票

你有_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>

1
投票

你的选择可能是这个问题,下面就为你的所有资产净值环节的工作

$('.menu_nav_list li a').on('click', function(){
    $('.menu').removeClass('active');
});

0
投票

您的网站具有操作错误。这是从这样的:

<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

(另外,作为一个侧面说明,代码库可能是传统的,但该网站看起来非常光滑!)


0
投票

在你的代码你上面使用。对()不正确,现在也瞄准元素

如果你想为目标的HREF你就需要把里面选择以下一个[HREF =“_自行车”],因为目前你正试图选择一个ID不是在你选择的HREF。

您需要将以下代码添加到您的JavaScript文件,如果你点击任意链接里面,你的资产净值将关闭菜单

$(document).on('click','.menu_nav_list a', function(){
    $('.menu').removeClass('active');
});