时间戳

首页 > 解决方案 > 单击时，按类名查找下一个元素

javascript - 单击时，按类名查找下一个元素

问题描述

我有一个移动菜单，当用户单击“打开”类的跨度时，下一个页脚菜单手风琴打开。但是，当用户单击锚链接“level-1”Men 时，它也会打开。我现在要做的是，当用户单击 Men I would like to use jquery 查找 NEXT footer-menu-accordion 并将其保持为 display:none （这是包含 level-2 锚标记的父 div ）。我知道我必须使用 jquery 的 next() 或 find() 方法，但我不知道该怎么做。谁能帮我吗？

function mobileMainNav() {
  $('a.level-1.direct').click(function(e) {
    window.location = $(this).attr('href');
  });
}

mobileMainNav();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mobile-menu" class=" footer-menu-accordion ">
  <div class="dropdown-container ">
     <a class="level-1 direct">Men</a>
     <span class="open">img</span>
  </div>
  <div class="footer-menu-accordion ">
    <a class="level-2 "></a>
    <ul></ul>
    <a class="level-2 "></a>
    <ul></ul>
    <a class="level-2 "></a>
    <ul></ul>
  </div>
</div>

我写了这个，所以当我点击 1 级时，我被定向到我网站的“男士”部分。这很好用，但是当我单击 level-1 时，我不希望打开下一个下拉菜单，而它目前确实如此。所以我知道我需要在这个函数中添加更多的 jquery 来做到这一点，我只是不确定我是 jQuery 的新手。先感谢您！

标签： javascriptjqueryhtmlcss

解决方案

我不确定你是否想为你的锚标签获取最近的页脚，级别为 1 或不......如果是这样，试试这个：

function mobileMainNav() {
  $('a.level-1').click(function(e) {
    var nearestFooter = $(this).parent().siblings('div.footer-menu-accordion');
    console.log(nearestFooter[0]);
  });
}

mobileMainNav();
<div id="mobile-menu" class="footer-menu-accordion">
  <div class="dropdown-container">
     <a class="level-1">Men</a>
     <span class="open">img</span>
  </div>
  <div class="footer-menu-accordion">
    <a class="level-2"></a>
    <ul></ul>
    <a class="level-2"></a>
    <ul></ul>
    <a class="level-2"></a>
    <ul></ul>
  </div>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

你也没有类（.direct）的元素

推荐阅读