草庐IT

javascript - Zurb Foundation topbar 菜单栏下拉菜单不起作用(手机尺寸一)

coder 2023-08-09 原文

大多数人都在谈论展开栏时的下拉菜单 当您将浏览器窗口调整为手机大小时，我说的是菜单。 你应该能够在菜单上并且项目列表应该下拉 http://foundation.zurb.com/docs/components/topbar.html 代码来自此页面(第二个示例)。如果您重新调整它应该显示菜单和下拉项目。

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

好的，所以代码是正确的，我已经检查过了，一个 friend 也检查过了。 澄清一下，我不是指带下拉菜单的右键。这工作得很好。

最佳答案

如果我没理解错的话，您希望“移动模式”下的顶部栏菜单按钮在悬停在此处时下拉

用鼠标。

在这种情况下，顶部栏按设计工作 - 移动触摸设备上没有悬停，因此它仅在移动模式下对触摸/点击使用react。

编辑:

我现在了解到您的问题是单击“菜单”切换按钮会重新加载页面。您似乎忘记了包含 Foundation topbar 脚本:

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

关于javascript - Zurb Foundation topbar 菜单栏下拉菜单不起作用(手机尺寸一)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20719303/

javascriptFoundationgtlt34jqueryhtmldrop-down-menuzurb-foundation

有关javascript - Zurb Foundation topbar 菜单栏下拉菜单不起作用(手机尺寸一)的更多相关文章

  1. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  2. 怎样用一台手机做自媒体？ - 2

    其实做自媒体的成本并不高，入门只需要一部手机即可！在手机上找视频素材、使用手机剪辑视频、最后使用手机发布视频作品获得收益！方法并不难，今天这期内容就来给粉丝们分享一种小方法，每天稳定收益100-300，抓紧点赞收藏！1、找素材（1）使用手机拍摄自己喜欢的经典段落，使用程序把文案内容提取出来（2）也可以在豆瓣、知乎、微博等网站中找一些自己需要的文案素材（3）把文案进行润色修改，可以加入一些自己的观点（4）视频素材可以使用软件中自带的素材，也可以在素材网站中下载完整版的素材2、文案配音（1）把复制好的文案直接导入小程序中（2）调整音色、音调后一键合成音频即可（3）可以选择自己朗读配音，需要花一点时

  3. ruby-on-rails - "assigns"在 Ruby on Rails 中有什么作用？ - 2

    我目前正在尝试学习RubyonRails和测试框架RSpec。assigns在此RSpec测试中做什么？describe"GETindex"doit"assignsallmymodelas@mymodel"domymodel=Factory(:mymodel)get:indexassigns(:mymodels).shouldeq([mymodel])endend 最佳答案 assigns只是检查您在Controller中设置的实例变量的值。这里检查@mymodels。 关于ruby-o

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - ActiveAdmin 自定义选择过滤器下拉名称 - 2

    对于用户模型，我有一个过滤器来检查用户的预订状态，该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而，这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时，我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点？ 最佳答案 假设booking_status是模型中的枚举字段，您可以使用:过滤器:booking

  6. ruby - 字符串文字前面的 * 在 ruby​​ 中有什么作用？ - 2

    这段代码似乎创建了一个范围从a到z的数组，但我不明白*的作用。有人可以解释一下吗？[*"a".."z"] 最佳答案 它叫做splatoperator.SplattinganLvalueAmaximumofonelvaluemaybesplattedinwhichcaseitisassignedanArrayconsistingoftheremainingrvaluesthatlackcorrespondinglvalues.Iftherightmostlvalueissplattedthenitconsumesallrvaluesw

  7. ruby - 为什么这个 eval 在 Ruby 中不起作用 - 2

    你能解释一下吗？我想评估来自两个不同来源的值和计算。一个消息来源为我提供了以下信息(以编程方式):'a=2'第二个来源给了我这个表达式来评估:'a+3'这个有效:a=2eval'a+3'这也有效:eval'a=2;a+3'但我真正需要的是这个，但它不起作用:eval'a=2'eval'a+3'我想了解其中的区别，以及如何使最后一个选项起作用。感谢您的帮助。 最佳答案 您可以创建一个Binding，并将相同的绑定(bind)与每个eval相关联调用:1.9.3p194:008>b=binding=>#1.9.3p194:009>eva

  8. ruby-on-rails - Spring 不起作用。 [未初始化常量 Spring::SID::DL] - 2

    我无法运行Spring。这是错误日志。myid-no-MacBook-Pro:myid$spring/Users/myid/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/spring-0.0.10/lib/spring/sid.rb:17:in`fiddle_func':uninitializedconstantSpring::SID::DL(NameError)from/Users/myid/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/spring-0.0.10/li

  9. ruby - Ruby 中的选项菜单 - 2

    我正在尝试在Ruby中创建一个菜单，以便根据用户输入的内容，取决于调用的类。然后在这种情况下它将返回到“Main”或类“Options”。我希望有人能帮助我。这是我的代码。modulePhysicsG=21C=20000Pi=3.14D=100endclassOptionsputs"Pleaseselect1forAccelerationand2forEnergy."option=gets()ifoption==1thenputs"AccelCalc"#ThisisthebitthatneedstodirecttheusertotheclassAccelCalcelseputs"Ene

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐