如何在Elementor Mega Menu中使用菜单项文本作为变量

根据不同技术栈，以下是几种直接可行的实现方案：

原生JavaScript（无框架） #

通过DOM操作获取菜单项文本，处理成URL友好格式后构造动态链接：

<!-- 示例HTML菜单结构 -->
<ul class="menu">
  <li><a href="#" class="menu-link">Jewelry</a></li>
  <li><a href="#" class="menu-link">Watches</a></li>
  <li><a href="#" class="menu-link">Vintage Accessories</a></li>
</ul>

<script>
// 获取所有菜单链接元素
const menuLinks = document.querySelectorAll('.menu-link');

menuLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止默认空链接跳转
    // 提取并处理菜单项文本：转小写、空格替换为连字符、去除首尾空格
    const cleanText = link.textContent.trim().toLowerCase().replace(/\s+/g, '-');
    // 构造动态URL（可根据实际需求修改基础路径）
    const targetUrl = `/category/${cleanText}`;
    // 跳转到目标地址
    window.location.href = targetUrl;
  });
});
</script>

Vue.js 框架 #

利用Vue的模板语法和方法，直接在渲染时生成动态URL：

<template>
  <ul class="menu">
    <li v-for="item in menuList" :key="item.label">
      <a :href="buildDynamicUrl(item.label)">{{ item.label }}</a>
    </li>
  </ul>
</template>

<script setup>
const menuList = [
  { label: 'Jewelry' },
  { label: 'Watches' },
  { label: 'Vintage Accessories' }
];

const buildDynamicUrl = (text) => {
  const urlSafeText = text.trim().toLowerCase().replace(/\s+/g, '-');
  return `/shop/${urlSafeText}`;
};
</script>

React 框架 #

通过数组映射渲染菜单，同时处理文本生成动态链接：

import React from 'react';

const Menu = () => {
  const menuItems = ['Jewelry', 'Watches', 'Vintage Accessories'];

  const formatForUrl = (text) => {
    return text.trim().toLowerCase().replace(/\s+/g, '-');
  };

  return (
    <ul className="menu">
      {menuItems.map((item) => (
        <li key={item}>
          <a href={`/collections/${formatForUrl(item)}`}>{item}</a>
        </li>
      ))}
    </ul>
  );
};

export default Menu;

服务器端渲染（以PHP为例） #

如果菜单是后端生成的，可直接在后端处理文本并构造URL：

<?php
$menuItems = ['Jewelry', 'Watches', 'Vintage Accessories'];
?>

<ul class="menu">
  <?php foreach ($menuItems as $item): ?>
    <?php
    // 处理文本为URL友好格式
    $urlSegment = strtolower(str_replace(' ', '-', trim($item)));
    $dynamicUrl = "/store/category/{$urlSegment}";
    ?>
    <li><a href="<?= $dynamicUrl ?>"><?= $item ?></a></li>
  <?php endforeach; ?>
</ul>

关键注意事项 #

• URL安全处理：如果菜单项包含特殊字符（如&、%、中文等），建议使用encodeURIComponent()（前端）或对应后端的URL编码函数进行处理，避免URL解析错误。
• 路径灵活性：示例中的基础路径（如/category/）可根据实际项目的路由规则修改。

内容的提问来源于stack exchange，提问作者Shaiful Rizal Shaharudin