Question

尝试在此网站上首次实施下拉菜单，并一直遇到问题。可能是我错过的东西，但我现在已经看了一会儿，看不出有什么不对！

以下是我页面上的代码副本（我从这里复制了https://foundation.zurb.com/sites/docs/top-bar.html）

      <div class="top-bar">

        <div class="top-bar-title">
<span data-responsive-toggle="responsive-menu" data-hide-for="medium" style="display: none;">
<button class="menu-icon dark" type="button" data-toggle=""></button>
</span>
            <Strong>Polaris CI Performance Board</Strong>
        </div>
        <div id="responsive-menu">
            <div class="top-bar-left">
                <ul class="dropdown menu" data-dropdown-menu>
                    <li>
                        <a href="#">One</a>
                        <ul class="menu vertical">
                            <li><a href="#">One</a></li>
                        </ul>
                    </li>
                    <li role="menuitem"><a href="#">Two</a></li>
                    <li role="menuitem"><a href="#">Three</a></li>
                </ul>
            </div>
            <div class="top-bar-right">
            </div>
        </div>

    </div>

正如您从屏幕截图中看到的那样，下拉列表不会压缩：

Answer 1

下拉菜单（或使用JavaScript的任何组件，您可以通过数据属性识别）需要在页面上初始化Foundation JavaScript。您的屏幕截图看起来没有正常运行...请确保您的<body>标记底部有

<script src="js/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>
<script>
   $(document).foundation();
</script>

参见例如http://foundation.zurb.com/sites/docs/installation.html#html-starter-template

Top Bar Drop Down在Foundation 6.2.4中不起作用

1 个答案: