Zurb 基金会顶部导航栏具有多个后退按钮

Question

我正在使用Java/JSP创建一个完整的网站，但也使用zurb基础。

现在我知道你必须调用$（document）.foundation（

）;才能使基础工作，但是因为我使用ajax在屏幕之间切换（在页面之间切换时没有白屏的闪光效果），当我打开主页时，它会执行该方法（$（document）.foundation（）;)一切看起来都很好。

问题出在我拥有的顶部导航栏上。如果它转到移动版本，您会在右侧获得"菜单"按钮，并在子类别之间切换，显示"返回"按钮以返回父类别。

当我打开下一页（使用 ajax）时，问题就开始了，它现在那里有组件，即组件。事实上，这些在基础上看起来比普通的标准html要好得多。当我执行 $（document）.foundation（）;同样，组件进入基础样式的组件，但现在在顶部导航栏中，有 2 个后退按钮，这也弄乱了后退按钮的功能，即破坏它。当我再次进入屏幕时，它会添加另一个后退按钮，依此类推。

有没有办法恢复foundation（）方法，然后再次调用它来刷新它？

这是我的顶部导航栏。

<div class='fixed contain-to-grid' style='height:67px;'>
<div class='large-12 columns' id='topNav'>
<nav class='top-bar'>
<ul class='title-area'>
<!-- Title Area -->
<li class='name'>
<h1><a href='#'><img src='img/logoLeft.png' style="width:181px;" id='logo'/></a></h1>
</li>
<!-- Remove the class 'menu-icon' to get rid of menu icon. Take out 'Menu' to just have    icon alone -->
<li class='toggle-topbar menu-icon'><a href='#'><span>Menu</span></a></li>
</ul>
<section class='top-bar-section'>
<ul class="left">
<li class="divider" id='div1' style='display:none;'></li>
<li class="has-dropdown" id='nonFinNav' style='display:none;'><a href="#">Non-Financial</a>
<ul class="dropdown">
<li><label>Heading 1</label></li>
<li><a href="#">Cat 1</a></li>
<li class="divider"></li>
<li><a href="#">Cat 2</a></li>
<li class="divider"></li>
<li><a href="#">Cat 3</a></li>
<li class="divider"></li>
<li class="has-dropdown"><a href="#" id='leaveMain'>Cat 4</a>
<ul class="dropdown">
<li><label>Leave</label></li>
<li><a href="#" id="leaveApplicationLink">SubCat 1</a></li>
<li class="divider"></li>
<li><a href="#">SubCat 2</a></li>
<li class="divider"></li>
<li><a href="#">SubCat 3</a></li>
<li class="divider"></li>
</ul></li>
<li class="divider"></li>
</ul>
</li>
<li class="divider" id='div2' style='display:none;'></li>
<li class="has-dropdown" id='FinNav' style='display:none;'><a href="#" style='margin-   right:29px;'>Financial</a>
<ul class="dropdown">
<li><label>Heading 2</label></li>
<li><a href="#">Cat 1</a></li>
<li class="divider"></li>
<li><a href="#">Cat 2</a></li>
<li class="divider"></li>
<li><a href="#">Cat 3</a></li>
<li class="divider"></li>
<li><a href="#">Cat 4</a></li>
<li class="divider"></li>
</ul>
</li>
<li class="divider" id='div3' style='display:none;'></li>
</ul>
<!-- Right Nav Section -->
<ul class='right'>
<li><a id='logOffButton' style='display:none;'>Log Off</a></li>
<li class='divider'></li>
<li><a id='helpButton'>Help</a></li>
<li class='divider'></li>
</ul>
</section>
</nav>
</div>
</div>

如果您需要更多信息，请询问，我会回复。

谢谢。

Answer 1

我一直遇到同样的问题。我无法通过基金会找到解决方案，但我确实想出了适合我目的的东西。

首先，我不是简单地做$（document）.foundation（），而是执行

$(document).foundation({topbar : {custom_back_text: false }}); 

这使得"后退"按钮现在以其上一个菜单命名。因此，每个后退按钮标题都应该是唯一的。重要的是它们是独一无二的。现在，我有一个脚本，可以根据链接文本删除所有重复的菜单项。我将其设置为每次有人单击带有子项的菜单项时触发（基金会为这些菜单项提供了一类"has-dropdown not-click"）。这样，脚本仅在真正需要时才运行。

function (){
    var uniqueBackButtons = [];
    $.each($('.back'), function(){
        if(uniqueBackButtons.indexOf(this.childNodes[0].childNodes[0].childNodes[0].data) == -1){
            uniqueBackButtons.push(this.childNodes[0].childNodes[0].childNodes[0].data);
        }
        else{
            $(this).remove();
        }
    });
}

Answer 2

我也有同样的问题。

我认为我之所以有多个"后退"按钮是因为此代码的多个声明：

 $(document).foundation(); 

请注意，我已经嵌入了这个

<script src="js/app.js"></script>

这也包含该脚本。它对我有用。我把我所有的脚本都放在js/app上.js