向下钻取菜单 "Back" 按钮的自定义文本 [Foundation 6]

Question

虽然我知道我可以使用 data-back-button 来更改我的向下钻取菜单上的文本，但是否可以更改它们以反映向下钻取的父项是什么？

例如，向下钻取菜单是这样工作的：

我希望它能这样运行：

我希望这是有道理的，如果我可以澄清，请告诉我。感谢您提供的任何见解。

Answer 1

有几种方法可以做到这一点，但在我看来最直接的方法如下：

1) 使用Foundations Drilldown options设置新的通用后退按钮。例如data-back-button='<li class="js-drilldown-back"><a class="new-back"></a></li>'

这会处理 .js-drilldown-back 的样式，并使其作为后退按钮使用，无需额外 JavaScript。它还向 a 添加了一个新的 class 供以后设置文本使用。

2) 要更改文本，您可以使用 jQuery，也许是这样的：

$('.new-back').each(function(){
  var backTxt = $(this).parent().closest('.is-drilldown-submenu-parent').find('> a').text();
  $(this).text(backTxt);
});

所有这一切只是加快菜单结构以找出原始 link 文本是什么，然后将其复制到新的后退按钮。

这应该适用于本例中所有级别的向下钻取：http://codepen.io/tymothytym/pen/GWbXap

仅供参考：使用相同的标签在菜单中向前和向后指向时存在一些轻微的可用性问题，因为用户会发现这会造成混淆，尤其是在许多级别时。你可能已经考虑过这一点，我只是为了完整性才提到它。

Answer 2

我无法更改项目中的菜单结构，所以我这样修复它：

if (jQuery('.js-drilldown-back').length) {
    jQuery('.js-drilldown-back').each(function () {
        jQuery('.js-drilldown-back').find('a').text('Custom back text');
    });
}

有了这个，您不需要额外的 html 标签。

向下钻取菜单 "Back" 按钮的自定义文本 [Foundation 6]

Custom Text for Drilldown Menu "Back" Button [Foundation 6]

zurb-foundation

zurb-foundation-6