在顶部栏中有双重下拉名称

Question

当我想使用 <li class="has-dropdown"> 时，我得到了双倍的下拉列表名称。我试过直接从基金会的文档中复制粘贴 topbar html 部分，然后我尝试从不同的已经准备好的模板中复制。我到处都遇到同样的问题。

{% load staticfiles %}

<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>

    <link rel="stylesheet" href="{% static "css/normalize.css" %}">
    <link rel="stylesheet" href="{% static "css/main.css" %}">

    <script src="{% static "js/vendor/modernizr.js" %}"></script>

</head>
<body>

<div class="fixed">

         <nav class="top-bar" data-topbar>
          <ul class="title-area">

            <li class="name">
              <h1>
                <a href="#">
                  Top Bar Title
                </a>
              </h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
          </ul>

          <section class="top-bar-section">

            <ul class="right">
              <li class="divider"></li>
              <li class="has-dropdown">
                <a href="#">Main Item 1</a>
                <ul class="dropdown">
                  <li><label>Section Name</label></li>
                  <li class="has-dropdown">
                    <a href="#" class="">Has Dropdown, Level 1</a>
                    <ul class="dropdown">
                      <li><a href="#">Dropdown Options</a></li>
                      <li><a href="#">Dropdown Options</a></li>
                      <li><a href="#">Level 2</a></li>
                      <li><a href="#">Subdropdown Option</a></li>
                      <li><a href="#">Subdropdown Option</a></li>
                      <li><a href="#">Subdropdown Option</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Dropdown Option</a></li>
                  <li><a href="#">Dropdown Option</a></li>
                  <li class="divider"></li>
                  <li><label>Section Name</label></li>
                  <li><a href="#">Dropdown Option</a></li>
                  <li><a href="#">Dropdown Option</a></li>
                  <li><a href="#">Dropdown Option</a></li>
                  <li class="divider"></li>
                  <li><a href="#">See all →</a></li>
                </ul>
              </li>
              <li class="divider"></li>
              <li><a href="#">Main Item 2</a></li>
              <li class="divider"></li>
              <li class="has-dropdown">
                <a href="#">Main Item 3</a>
                <ul class="dropdown">
                  <li><a href="#">Dropdown Option</a></li>
                  <li><a href="#">Dropdown Option</a></li>
                  <li><a href="#">Dropdown Option</a></li>
                  <li class="divider"></li>
                  <li><a href="#">See all →</a></li>
                </ul>
              </li>
            </ul>
          </section>
        </nav>
</div>

<script src="{% static "js/vendor/jquery.js" %}"></script>
<script src="{% static "js/foundation.min.js" %}"></script>

<script type="text/javascript">
    $(document).foundation();
</script>

</body>
</html>

怎么了？

Answer 1

终于找到解决办法了。

第一种（正确）方式：

在index.html有必要改成

<script type="text/javascript">
    $(document).foundation();
</script>

到

<script type="text/javascript">
    $(document).foundation({topbar: {mobile_show_parent_link : false}});
</script>

为了我的需要，我还添加了 custom_back_text : false，所有的看起来像这样

<script type="text/javascript">
    $(document).foundation({topbar: {custom_back_text : false,
                                    mobile_show_parent_link : false}});
</script>

第二种方式：

直接在 foundation.topbar.js 中将 mobile_show_parent_link 从 true（默认）编辑为 false，例如mobile_show_parent_link : false,

我不知道为什么 mobile_show_parent_link 在桌面模式下工作，而从名字我理解它应该只在移动设备上工作。

在顶部栏中有双重下拉名称

In topbar there is doubled dropdown name

zurb-foundation

drop-down-menu