从导航栏删除一个类，使其在单击导航栏项时折叠 [英] Removing a class from navbar to make it collapse upon navbar item being clicked

问题描述

我有一个继承自某些旧代码的导航栏-我正在尝试使移动版本在单击菜单项时折叠.

I have a navbar that's inherited from some legacy code - and I'm trying to get the mobile version to collapse when a menu item is clicked.

http://shitnavbar.brodiedigital.io/

如果您调整窗口大小并滚动到页面的前100vh，将显示汉堡菜单.

If you resize the window and scroll beyond the first 100vh of the page the hamburger menu will appear.

单击将显示菜单项

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

clicking a menu item WILL scroll you to correct area of page, but not collapse/close the menu

此刻，我正在使用一些jquery尝试通过仅将菜单中的单个项目定位为自行车"来实现此目的，

At the moment I'm using some jquery to attempt to do this by targeting just a single item on the menu - 'BIKES', with little joy:

$('#_bikes').on('click', function(){
    $('.menu').removeClass('active');
});

该部分的

html是

html for the section is

  <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并不是我的强项，但是感觉就像我在这里有点放屁的时候-我做错了很简单.

Jquery isnt my strong point, but feel like im having a bit of a brain fart moment here - something very simple I'm doing wrong.

有没有人了解为什么点击自行车不能从具有菜单"类的div中删除活动"类?

Has anyone got an insight into why clicking bikes is not removing the class 'active' from the div that has 'menu' class in it?

推荐答案

您没有ID为_bikes的元素，这就是您的jquery不起作用的原因.使用将起作用的选择器:

You have no element with an id of _bikes that is why your jquery doesn't work. Use a selector that will work:

$('.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>

这篇关于从导航栏删除一个类，使其在单击导航栏项时折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！