0

我正在使用 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>

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

谢谢。

4

2 回答 2

2

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

首先，我不是简单地执行 $(document).foundation()，而是执行

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

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

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();
        }
    });
}
于 2013-11-29T05:34:54.957 回答
1

我也有同样的问题。

我认为我确实有多个“后退”按钮的原因是因为这段代码的多次声明：

 $(document).foundation();

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

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

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

于 2013-12-05T19:46:07.117 回答