从导航栏中删除一个类以使其在单击导航栏项目时折叠答案

【问题标题】：Removing a class from navbar to make it collapse upon navbar item being clicked从导航栏中删除一个类以使其在单击导航栏项目时折叠
【发布时间】：2019-02-07 15:13:53
【问题描述】：

我有一个从一些遗留代码继承的导航栏 - 我试图让移动版本在单击菜单项时折叠。

http://shitnavbar.brodiedigital.io/

如果您调整窗口大小并滚动到页面的前 100vh 之外，则会出现汉堡菜单。

点击会显示菜单项

单击菜单项将滚动到页面的正确区域，但不会折叠/关闭菜单

目前我正在使用一些 jquery 来尝试通过仅针对菜单上的一个项目 - 'BIKES' 来做到这一点，但没有什么乐趣：

$('#_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 不是我的强项，但我觉得我在这里有点放屁的感觉 - 很简单的事情我做错了。

有没有人了解为什么单击自行车不会从包含“菜单”类的 div 中删除“活动”类？

【问题讨论】：

您的链接打不开。也请添加html代码。
你当前的代码说：“当点击ID为_bikes的元素时，找到整个HTML文档中所有menu类的元素，并删除@987654326类@ 来自所有这些元素。” 这对我来说似乎是正确的，只要这些选择器是准确的。
我已经编辑了我的原始帖子 - 为丢失的信息道歉并感谢您的时间。克里斯，你所描述的是我希望发生的事情，但现在根本不会发生。
$('.menu').removeClass('active') 似乎有效，在您的菜单处于活动状态时在控制台上尝试过。你确定 eventListener 触发了吗？添加一个console.log并检查

标签： javascript jquery html

【解决方案1】：

您的选择器可能是问题所在，以下将适用于您的所有导航链接

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

【讨论】：

【解决方案2】：

您没有 id 为 _bikes 的元素，这就是您的 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>

【讨论】：

感谢您的帮助 - 我也尝试了您的代码并且它有效。除了每一行，我都非常感谢您的 cmets。

【解决方案3】：

您的网站存在控制台错误。来自这个：

<script type="text/javascript">
$('#_bikes').on('click', function(){
    $('.menu').removeClass('active');
});
</script>

当你运行 jQuery 代码时，你需要在下面指向 jQuery 文件的链接中包含这段代码，现在你正在尝试在 jQuery 库加载之前运行 jQuery 代码。

并且也将它包裹在一些东西中以等待文档准备好

<script type="text/javascript">
$(function() {
    $('#_bikes').on('click', function(){
        $('.menu').removeClass('active');
    });
});
</script>

看起来您还包含了两次 jQuery 库，并且有两个不同的版本。 v3.2.1 和 v1.11.0

（顺便说一句，代码库可能是遗留的，但那个网站看起来真的很漂亮！）

【讨论】：

【解决方案4】：

在您上面的代码中，您错误地使用了 .on() 并且您还针对该元素

如果您想定位 href，您需要将以下内容放在选择器 a[href="_bikes"] 中，因为目前您正在尝试选择 ID 而不是选择器中的 href。

您需要将以下代码添加到您的 javascript 文件中，如果您单击导航中的任何链接，它将关闭菜单

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

【讨论】：