Foundation 6 下拉菜单，无法点击移动设备上的子菜单答案

【问题标题】：Foundation 6 dropdown menu, can't click on submenus on mobile devicesFoundation 6 下拉菜单，无法点击移动设备上的子菜单
【发布时间】：2016-12-26 13:37:12
【问题描述】：

各位开发者您好。我在使用 Foundation 下拉菜单时遇到了问题，在解决了一段时间后，我寻求您的帮助，Foundation 专家。

我正在使用基础 6.2.4-full。我创建了一个下拉菜单，但我注意到了一个问题，问题出在将菜单与移动设备一起使用时（在 iphone 4 上尝试）。它的子菜单项不可点击。例如，单击地图选项，然后尝试单击口袋妖怪子选项。代码嵌入在下面。我找不到问题，我对基础很陌生，也许我错过了一个重要的选择？

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="device-width=width, initial-scale=1">
    <link rel="stylesheet" href="/css/foundation/foundation.min.css">
    <script src="/js/jquery_2.2.4.min.js"></script>
    <script src="/js/foundation/what-input.js"></script>
    <script src="/js/foundation/foundation.min.js"></script>
</head>
<body>
<script>
    $(document).ready(function() {
        $(document).foundation();
    });
</script>
<nav class="top-bar">
    <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
        <li><a href="/">Home</a></li>
        <li class="has-submenu">
            <a href="/">Map</a>
            <ul class="menu submenu vertical nested" data-submenu>
                <li><a href="">Pokemons</a></li>
                <li><a href="">Poke Gyms</a></li>
                <li><a href="">Poke Stops</a></li>
            </ul>
        </li>
        <li><a href="">news</a></li>
        <li class="has-submenu">
            <a>Guides</a>
            <ul class="menu submenu vertical nested" data-submenu>
                <li>
                    <a href="">Game guides</a>
                </li>
                <li>
                    <a href="">Site guides</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
</body>
</html>

【问题讨论】：

有人吗？可能是建议之类的，如果菜单有问题，可能使用第三方插件？
您的加载顺序错误，将 jquery 和 javascripts 加载到文档的页脚中，然后在那里启动基础，而不是在文档的头部 - 您的 sn-p 抛出 jQuery 错误： " Guides Game guides Site guides { "message": "ReferenceError: $ is not defined", "filename": "stacksnippets.net/js", "lineno": 22, "colno": 5 }"
很抱歉，但我不认为订单有误。它在这里生成错误只是因为它找不到文件，我正在向其他人展示我的布局以了解我使用的版本和文件
让代码尽可能正确会有所帮助。

标签： javascript jquery html css zurb-foundation

【解决方案1】：

这似乎可行，在移动设备上试一试，我认为 Foundation 会检测到移动设备并将悬停变成点击，所有事件都在他们的文档中：https://foundation.zurb.com/sites/docs/dropdown-menu.html。

这是我的例子：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="device-width=width, initial-scale=1">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
</head>
<body>
<nav class="top-bar">
    <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
        <li><a href="/">Home</a></li>
        <li class="has-submenu">
            <a href="/">Map</a>
            <ul class="menu submenu vertical nested" data-submenu>
                <li><a href="">Pokemons</a></li>
                <li><a href="">Poke Gyms</a></li>
                <li><a href="">Poke Stops</a></li>
            </ul>
        </li>
        <li><a href="">news</a></li>
        <li class="has-submenu">
            <a>Guides</a>
            <ul class="menu submenu vertical nested" data-submenu>
                <li>
                    <a href="">Game guides</a>
                </li>
                <li>
                    <a href="">Site guides</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
  <script>
    $(document).ready(function() {
        $(document).foundation();
    });
</script>
</body>
</html>

【讨论】：

要更改点击移动设备的行为，请按照此处的说明操作：foundation.zurb.com/sites/docs/top-bar.html#advanced-layout，使用“响应式切换插件”。
我已经找到了另一个解决方案。目前使用适合我需要的第 3 方库。不过谢谢你的回复，我会检查代码并回信。
酷，你带了什么？
嘿 Nathaniel，抱歉久违了。我已经检查了你的代码，但它给我的代码和我的代码一样，你根本无法点击弹出的子菜单。我不知道问题是什么，我现在不想摆弄它。我只是想说我正在使用来自smartmenus.org 的“SmartMenus jQuery 插件”，它目前对我有用。希望将来我能理解基础菜单出了什么问题，或者他们可能会纠正他们的错误。感谢您对我的问题的关注。干杯！
您是否按照我的建议进行了修复？可能只是 jQuery/javascript 冲突，而不是 Foundation 中的代码错误。无论如何，感谢您的回复，我很高兴您继续前进。