Foundation 6响应式菜单异常，需如何调整使其正常工作？

已引入Foundation 6.8.1与jQuery 3.7.1，且已成功初始化Foundation——菜单已生成data-mutate属性，但菜单元素始终未被自动添加dropdown类和data-dropdown-menu属性。尝试更换过往项目中可用的Foundation版本、直接初始化data-dropdown-menu菜单，均仅出现data-mutate属性，无预期的类和属性。

原始HTML代码 #

<!DOCTYPE html>
<html class="no-js" lang="en-US">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name='robots' content='max-image-preview:large' />
<link rel='stylesheet' id='foundation-css' href='https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css' type='text/css' media='all' />
<script type="text/javascript" src="http://example.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>
<script type="text/javascript" src="http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script>
      
</head>
<body class="home blog">

    <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
      <li>
        <a href="#">Item 1</a>
        <ul class="vertical menu">
          <li>
            <a href="#">Item 1A</a>
            <ul class="vertical menu">
              <li><a href="#">Item 1A</a></li>
              <li><a href="#">Item 1B</a></li>
              <li><a href="#">Item 1C</a></li>
              <li><a href="#">Item 1D</a></li>
              <li><a href="#">Item 1E</a></li>
            </ul>
          </li>
          <li><a href="#">Item 1B</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Item 2</a>
        <ul class="vertical menu">
          <li><a href="#">Item 2A</a></li>
          <li><a href="#">Item 2B</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Item 3</a>
        <ul class="vertical menu">
          <li><a href="#">Item 3A</a></li>
          <li><a href="#">Item 3B</a></li>
        </ul>
      </li>
    </ul>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js?ver=6.7.4" id="theme-js"></script>
    <script>
        (function($){
            $(document).foundation();
        })(jQuery);
    </script>
</body>
</html>

初始化后的菜单代码 #

<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" data-mutate="4vsm9h-responsive-menu">
      <li>
        <a href="#">Item 1</a>
        <ul class="vertical menu">
          <li>
            <a href="#">Item 1A</a>
            <ul class="vertical menu">
              <li><a href="#">Item 1A</a></li>
              <li><a href="#">Item 1B</a></li>
              <li><a href="#">Item 1C</a></li>
              <li><a href="#">Item 1D</a></li>
              <li><a href="#">Item 1E</a></li>
            </ul>
          </li>
          <li><a href="#">Item 1B</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Item 2</a>
        <ul class="vertical menu">
          <li><a href="#">Item 2A</a></li>
          <li><a href="#">Item 2B</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Item 3</a>
        <ul class="vertical menu">
          <li><a href="#">Item 3A</a></li>
          <li><a href="#">Item 3B</a></li>
        </ul>
      </li>
    </ul>

排查解决方法 #

• 统一Foundation CSS与JS版本：当前代码中CSS用的是6.8.1，但JS用的是6.7.4，版本不匹配会导致组件逻辑异常。将JS版本改为与CSS一致的6.8.1：

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js?ver=6.8.1" id="theme-js"></script>
  

• 手动添加必要类与属性：如果自动初始化失效，直接给父菜单添加dropdown类和data-dropdown-menu属性，确保结构符合Foundation要求：

  <ul class="vertical medium-horizontal menu dropdown" data-responsive-menu="drilldown medium-dropdown" data-dropdown-menu>
  

• 验证jQuery有效性：确认jQuery在Foundation JS之前加载，且未被其他脚本覆盖。可在初始化前打印jQuery对象检查：

  (function($){
      console.log($); // 确认jQuery对象正常
      $(document).foundation();
  })(jQuery);
  

• 检查响应式菜单配置语法：确认data-responsive-menu="drilldown medium-dropdown"拼写正确，Foundation 6中该属性取值格式无误。
• 避免重复初始化或组件冲突：确保页面仅调用一次$(document).foundation()，排查是否有其他Foundation组件（如Tabs、Accordion）干扰菜单初始化逻辑。

内容的提问来源于stack exchange，提问作者Astrid Iron-Fang