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

Question

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

<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

（另外，作为一个侧面说明，代码库可能是传统的，但该网站看起来非常光滑！）

Answer 4

在你的代码你上面使用。对（）不正确，现在也瞄准元素

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

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

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