Question

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

现在我知道你必须调用$（document）.foundation（）;为了使基础工作，但因为我使用ajax在屏幕之间切换（当在页面之间切换时没有那个白色屏幕的闪光效果）当我打开我的主页时它执行该方法（$（document）.foundation（）;）一切都很好。

问题在于我拥有的Top Nav栏。如果它转到移动版本，您将获得右侧的菜单按钮，并在子类别之间切换，显示“返回”按钮以返回到父类别。

当我打开下一页（使用ajax）时问题就开始了，它现在有组件就是组件。实际上这些在基础上看起来比普通的标准html更好。当我执行$（document）.foundation（）;再次，组件进入基础风格的组件，但现在有顶部导航栏，有2个后退按钮，并且与后退按钮的功能混淆，即打破它。当我再次进入屏幕时，它会添加另一个后退按钮等等。

是否有某种方法可以恢复foundation（）方法，然后再次调用它来刷新它？

这是我的Top Nav栏。

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

Zurb Foundation Top导航栏有多个后退按钮

2 个答案: