在頂欄中有兩倍的下拉菜單名稱

當我想使用<li class="has-dropdown">時，我的下拉菜單的名稱加倍了。我試圖直接從基金會的文檔複製粘貼頂部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>

有什麼不對？

來源

2015-09-08 TitanFighter

Finaly找到了解決方案。

第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在桌面模式下工作，而從我理解的名稱，因爲它應該只在移動設備上工作。

來源

2015-09-08 22:30:19 TitanFighter

在頂欄中有兩倍的下拉菜單名稱

回答

相關問題