Question

当我想使用<li class="has-dropdown">时，我得到了下拉名称加倍。我已经尝试直接从基金会的doc复制粘贴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

最终找到了解决方案。

第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可以在桌面模式下运行，而从我理解的名称来看，它应该仅适用于移动设备。

在顶部栏中有一个双下拉名称

1 个答案: