点击子菜单，添加父级Class并保持展开

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《点击子菜单添加父级Class保持展开》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

本文旨在解决在JavaScript中，点击子菜单项后，如何通过添加Class到父级UL元素，从而保持该父级菜单始终展开的问题。我们将通过分析HTML结构和JavaScript代码，提供清晰的解决方案，并解释关键步骤，确保读者能够理解并应用到自己的项目中。

问题分析

在侧边栏或导航菜单中，通常会使用嵌套的

和
• 元素来构建层级结构。当点击子菜单项时，我们希望其父级菜单（即包含该子菜单项的
  元素）保持展开状态，而不是自动折叠。这可以通过在点击事件发生时，向父级
  元素添加特定的Class来实现。

  解决方案

  考虑到HTML结构如下：

  <li class="nav-item">
      <a class="nav-link collapsed" data-bs-target="#econ-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-bar-chart"></i><span>finance</span><i class="bi bi-chevron-down ms-auto"></i>
      </a>
      <ul id="econ-nav" class="nav-content collapse" data-bs-parent="#sidebar-nav">
          <li>
              <a class="sub" href="submeni1.html">
                  <i class="bi bi-circle"></i><span>SubMenu1</span>
              </a>
          </li>
          <li>
              <a class="sub" href="submenu2.html">
                  <i class="bi bi-circle"></i><span>submenu2</span>
              </a>
          </li>
      </ul>
  </li>
  
  <li class="nav-item">
      <a class="nav-link collapsed" data-bs-target="#econ-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-bar-chart"></i><span>Expenses</span><i class="bi bi-chevron-down ms-auto"></i>
      </a>
      <ul id="econ-nav" class="nav-content collapse" data-bs-parent="#sidebar-nav">
          <li>
              <a class="sub" href="submeni1.html">
                  <i class="bi bi-circle"></i><span>SubMenu1</span>
              </a>
          </li>
          <li>
              <a class="sub" href="submenu2.html">
                  <i class="bi bi-circle"></i><span>submenu2</span>
              </a>
          </li>
      </ul>
  </li>

  其中，.sub类应用于子菜单项的标签，nav-content collapse 类应用于包含子菜单项的

  标签。我们需要在点击.sub时，为父级的
  元素添加show类。

  正确的JavaScript代码如下：

  $(document).ready(function () {
      $('.sub').click(function (e) {
          // 阻止默认链接行为，避免页面跳转
          e.preventDefault();
  
          // 查找父级的父级元素（即<ul>元素）并添加 'show' 类
          $(this).parent().parent().addClass('show');
  
          // 或者，使用更健壮的查找方式，避免依赖于特定的HTML结构
          $(this).closest('.nav-content.collapse').addClass('show');
      });
  });

  代码解释：

  1. $(document).ready(function () { ... });：确保DOM加载完成后执行JavaScript代码。
  2. $('.sub').click(function (e) { ... });：为所有.sub类元素绑定点击事件。
  3. e.preventDefault();：阻止默认的链接跳转行为，确保页面不刷新。
  4. $(this).parent().parent().addClass('show');：
     • $(this)：指代被点击的.sub元素。
     • .parent()：获取.sub元素的直接父元素，即
     • 元素。
     • .parent()：再次调用.parent()，获取
     • 元素的父元素，即目标
       元素。
       • .addClass('show');：为目标
         元素添加show类，从而使其保持展开状态。
       • $(this).closest('.nav-content.collapse').addClass('show');：
         • closest() 方法从当前元素开始，沿 DOM 树向上遍历，直到找到匹配给定选择器的第一个元素。
         • 这种方式更健壮，因为它不依赖于固定的 HTML 结构，即使 HTML 结构发生变化，代码仍然可以正常工作。

  注意事项：

  • 确保引入了 jQuery 库。
  • .show 类需要配合 CSS 样式来控制菜单的显示与隐藏。通常，.show 类会设置 display: block; 或其他合适的显示方式。
  • HTML结构可能因项目而异，请根据实际情况调整.parent()的调用次数或使用.closest()方法。
  • 如果使用了Bootstrap等框架，可能需要考虑框架自身的菜单展开/折叠机制，并进行相应的调整。
  • e.preventDefault(); 非常重要，它可以阻止点击链接后的默认跳转行为，避免页面刷新。

  总结

  通过上述方法，我们可以在点击子菜单项时，动态地向父级

  元素添加show类，从而实现保持菜单展开的效果。 这种方法简单有效，并且易于理解和应用。在实际项目中，请根据具体情况调整代码，并确保CSS样式与JavaScript代码协同工作，以达到最佳效果。使用 .closest() 方法可以使代码更健壮，避免依赖于特定的 HTML 结构。

  以上就是《点击子菜单，添加父级Class并保持展开》的详细内容，更多关于的资料请关注golang学习网公众号！