是否有一种方法可以使用vanilla Javascript或Jquery在DOM之前选择span类？

Question

我正在设计一个Squarespace网站，所以我没有直接访问HTML。 我想在网站的下拉菜单系统中添加一些CSS。 菜单系统的设置方式，它确实不会分配ID名称，只分配类名称。 因此，它有一个DIV，在一个DIV中，它有几个SPAN类。 问题是所有文件夹SPANS都被命名为相同，所有HREF类都被命名为相同。 例如，我想要发生的是，如果用户点击“关于我们”，“Memstaff团队”或“职业”，我想将一个名为“currentFolder”的类添加（不替换）给“ /关于“HREF是它之前的SPAN（其类名为”Header-nav-folder-title“）。但我不想影响后面的其他HREF，它也具有相同的CLASS “Header-nav-folder-title”的名称。当用户点击任何其他链接时，我还想删除类“currentFolder”，这样我就可以重复这个过程。我知道Jquery的.closest（）和.find（）但对如何正确使用它们知之甚少。

<div class="Header-nav-inner">
<span class="Header-nav-item Header-nav-item--folder">
<a href="/about" class="Header-nav-folder-title">About</a>
<span class="Header-nav-folder">                      
<a href="/about-us" class="Header-nav-folder-item">About Us</a>
<a href="/memstaff-team" class="Header-nav-folder-item">MEMStaff Team</a>                                                        
<a href="/careers" class="Header-nav-folder-item">Careers</a>
</span>
</span><span class="Header-nav-item Header-nav-item--folder">
<a href="/job-seekers" class="Header-nav-folder-title">Job Seekers</a>
<span class="Header-nav-folder">
<a href="/submit-a-resume" class="Header-nav-folder-item">Submit a Resume</a>
<a href="/memstaff-jobs" class="Header-nav-folder-item">MEMStaff Jobs</a>
<a href="/referral-bonus" class="Header-nav-folder-item">Referral Bonus</a></span>
</span><a href="/for-employers" class="Header-nav-item">For Employers</a>
<a href="/contact" class="Header-nav-item">Contact</a>
</div>

Answer 1

$('a.Header-nav-folder-item').click(function() {
  //Remove active class from all title elements
  $('.Header-nav-folder-title').removeClass('active');
  // Add class to correct title element
  $(this).parent().siblings('.Header-nav-folder-title').eq(0).addClass('active');
});

// Remove active class when clicking on bottom two links
$('a.Header-nav-item').click(function() {
  //Remove active class from all title elements
  $('.Header-nav-folder-title').removeClass('active');
});

Answer 2

以下是一些我认为可以解决您问题的代码。 您应该将其设置为在页面导航时运行（可能是文档加载）。

请注意，这仅在页面路径与链接href完全匹配时才有效。

// Get all of the folders
const folders = document.querySelectorAll('span.Header-nav-item--folder');

// Loop through the folders
for (const folder of folders) {
  // Variable for if one of the folder contents is the current page
  let childIsCurrent = false;
  // Get all of the links in the dropdown
  const links = folder.querySelectorAll('a.Header-nav-folder-item');

  // Loop through the links
  for (const link of links) {
    // Compare the link href with our current path
    if (link.href === location.pathname)
      childIsCurrent = true;
  }

  // Find the folder title
  const title = folder.querySelector('a.Header-nav-folder-title');
  // Add or remove the class
  if (childIsCurrent)
    title.classList.add('currentFolder');
  else
    title.classList.remove('currentFolder');
}