Question

你好开发人员..我的基础下拉菜单有问题，经过一段时间解决问题后，我寻求你的帮助，基础大师。

我正在使用基础6.2.4-完整。我已经创建了一个下拉菜单，但我注意到了一个问题，问题在于使用带有移动设备的菜单（试试iphone 4）。它的子菜单项不可点击。例如，单击Map选项，然后尝试单击Pokemons子选项。代码嵌入在下面。我找不到问题，我对基础很新，也许我错过了一个重要的选择？

<!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>

Answer 1

这似乎有效，让它继续使用移动设备，我认为Foundation会检测到移动设备并将鼠标悬停在点击中，所有事件都在他们的文档中：https://foundation.zurb.com/sites/docs/dropdown-menu.html。

这是我的榜样：

＆＃13;

<!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>

＆＃13;

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

1 个答案: