Javascript ZURB基金会顶部酒吧菜单栏下拉不工作（电话大小一）_Javascript_Jquery_Html_Drop Down Menu_Zurb Foundation

Javascript ZURB基金会顶部酒吧菜单栏下拉不工作（电话大小一）

javascript jquery html drop-down-menu zurb-foundation

Javascript ZURB基金会顶部酒吧菜单栏下拉不工作（电话大小一）,javascript,jquery,html,drop-down-menu,zurb-foundation,Javascript,Jquery,Html,Drop Down Menu,Zurb Foundation,大多数人都在谈论扩展栏时的下拉菜单我指的是将浏览器窗口调整为手机大小时的菜单。您应该能够在菜单上方单击，并且项目列表应该下拉代码来自本页（第二个示例）。如果您重新调整，它将显示菜单和下拉项 <!doctype html> <html> <head> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet"

大多数人都在谈论扩展栏时的下拉菜单我指的是将浏览器窗口调整为手机大小时的菜单。您应该能够在菜单上方单击，并且项目列表应该下拉代码来自本页（第二个示例）。如果您重新调整，它将显示菜单和下拉项

<!doctype html>
    <html>
    <head>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/foundation.css">
        <link rel="stylesheet" href="css/app.css">
        <script src="js/vendor/custom.modernizr.js"></script>
        <script src="js/jquery.js"></script>
        <script src="js/foundation.js"></script>
        <script src="js/foundation.dropdown.js"></script>
        <meta charset="utf-8">
    <title>Gideon Sassoon</title>
    </head>
<body>
    <nav class="top-bar" data-topbar>
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">My Site</a></h1>
      </li>    
      <li class="toggle-topbar menu-icon"><a href=""><span>Menu</span>
            </a>
        </li>
      </ul>

      <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">
          <li class="active"><a href="#">Right Nav Button Active</a></li>
          <li class="has-dropdown not-click">
            <a href="#">Right Button with Dropdown</a>
            <ul class="dropdown">
              <li><a href="#">First link in dropdown</a></li>
            </ul>
          </li>
        </ul>
      </section>
    </nav>
    <script>$(document).foundation();</script>
</body>
</html>


吉迪恩·萨松














$（document.foundation（）；

好的，代码是正确的，我已经检查过了，一个朋友也检查过了。

澄清一下，我指的不是带下拉菜单的右键。这很好。

如果我没弄错的话，您希望“移动模式”中的topbar菜单按钮在悬停在这里时会下拉

用鼠标

在这种情况下，topbar按设计工作-移动触摸设备上没有悬停，因此它仅在移动模式下对触摸/点击做出反应

编辑：

我现在理解您的问题是，单击“菜单”切换将重新加载页面。好像你忘了包括基础TopBar脚本：

<script src="js/foundation.js"></script>
<script src="js/foundation.dropdown.js"></script>
<script src="js/foundation.topbar.js"></script>

我知道这是一个古老的问题，但我想我刚刚解决了您看到的同一个问题，所以我为其他任何遇到它的人添加了这个答案

对我来说，问题是我试图覆盖CSS中顶部栏元素的高度。一旦我删除了这个条目，我的顶部栏在小屏幕上就正常工作了

.top-bar {
    height: 3em;
}

希望这对某人有所帮助

我也有同样的问题，通过以下方法解决了：

$('.left-off-canvas-toggle').on('click', function(){});

是的，你是对的，我已经点击了。它的响应不正确

问题在于

。因为它只是重新加载页面。但相比之下，他们有相同的，但事实并非如此。他们的例子在我的浏览器中也有响应。这就是我一直在测试的地方。所以它应该会起作用。@Gideonsasson你说的“反应不正确”是什么意思？它是如何响应的？在菜单中，它应该下拉，但它只是重新加载页面。抱歉，我没有意识到我必须使用Shift+Return来创建一个新行。我将它添加到这些行之间，这样做没有任何效果


@gideonsasson请创建一个显示问题的JSFIDLE。此处相同。修复了移动chrome上的一个问题。切换功能适用于safari mobile和所有桌面web客户端，但不适用于chrome mobile（38.0.2125.59）。