Question

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

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中删除“活动”类？

Answer 1

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

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

Answer 2

在上面的代码中，您错误地使用了.on（），而且您还定位了元素

如果要定位href，则需要在选择器a [href =“ _ bikes”]中放置以下内容，因为当前您正尝试在选择器中选择一个ID，而不是href。

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

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

Answer 3

您没有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>

Answer 4

您的网站出现控制台错误。是这样的：

<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 个答案: