如何获取当前页面对应导航菜单的子项？场景实现需求问询

当然可以实现这个需求啦！下面给你两种常见的实现思路，根据你的网站类型选择就行～

实现方法一：前端纯JavaScript方案（适合静态页面） #

如果你的网站是静态HTML页面，用JS就能轻松搞定。首先我们可以给导航菜单的每个主菜单项加个标识（比如data-page属性），方便匹配当前页面：

<ul id="top-menu">
  <li data-page="item1">Item 1 
    <ul>
      <li><a href="sub1-1.html">Sub Item 1-1</a></li>
    </ul>
  </li>
  <li data-page="item2">Item 2</li>
  <li data-page="item3">Item 3 
    <ul>
      <li><a href="sub3-1.html">Sub Item 3-1</a></li>
      <li><a href="sub3-2.html">Sub Item 3-2</a></li>
    </ul>
  </li>
  <li data-page="item4">Item 4 
    <ul>
      <li><a href="sub4-1.html">Sub Item 4-1</a></li>
    </ul>
  </li>
  <li data-page="item5">Item 5 
    <ul>
      <li><a href="sub5-1.html">Sub Item 5-1</a></li>
      <li><a href="sub5-2.html">Sub Item 5-2</a></li>
      <li><a href="sub5-3.html">Sub Item 5-3</a></li>
    </ul>
  </li>
</ul>

接着，在Item 3对应的页面里，先准备一个用来展示子项的容器：

<!-- 文章区域的子项展示容器 -->
<div id="submenu-container"></div>

最后添加一段JS代码，页面加载时自动匹配当前页面对应的子菜单，克隆到容器中：

document.addEventListener('DOMContentLoaded', function() {
  // 这里可以根据URL自动获取当前页面标识，比如从location.pathname提取
  // 示例中直接指定为item3，实际项目可以动态获取
  const currentPage = 'item3';
  const topMenu = document.getElementById('top-menu');
  const targetMenuItem = topMenu.querySelector(`li[data-page="${currentPage}"]`);

  if (targetMenuItem) {
    const subMenu = targetMenuItem.querySelector('ul');
    if (subMenu) {
      const container = document.getElementById('submenu-container');
      // 克隆子菜单并插入到容器中
      container.appendChild(subMenu.cloneNode(true));
    }
  }
});

实现方法二：后端渲染方案（适合动态网站/CMS） #

如果你的网站是动态的（比如用PHP、Python、Node.js等后端语言开发，或者基于WordPress这类CMS），直接在后端渲染页面时生成子项列表会更高效。

举个PHP的例子：
首先我们可以把导航菜单的数据存在一个数组里（或者从数据库/CMS配置中读取）：

$navMenu = [
  'item1' => [
    'text' => 'Item 1',
    'subitems' => [
      ['text' => 'Sub Item 1-1', 'url' => 'sub1-1.html']
    ]
  ],
  'item2' => [
    'text' => 'Item 2',
    'subitems' => []
  ],
  'item3' => [
    'text' => 'Item 3',
    'subitems' => [
      ['text' => 'Sub Item 3-1', 'url' => 'sub3-1.html'],
      ['text' => 'Sub Item 3-2', 'url' => 'sub3-2.html']
    ]
  ],
  // 其他菜单项省略
];

// 根据当前路由或页面标识，获取对应的菜单项
$currentPage = 'item3'; // 实际项目中可以从请求参数/路由中动态获取

然后在页面的文章区域，直接输出子项列表：

<?php if (!empty($navMenu[$currentPage]['subitems'])): ?>
<ul>
  <?php foreach ($navMenu[$currentPage]['subitems'] as $subitem): ?>
    <li><a href="<?= $subitem['url'] ?>"><?= $subitem['text'] ?></a></li>
  <?php endforeach; ?>
</ul>
<?php endif; ?>

这种方式不需要前端额外处理，页面加载时直接渲染出子项列表，对SEO也更友好。

内容的提问来源于stack exchange，提问作者M. Safari