向下钻取菜单“返回”按钮的自定义文本 [Foundation 6]答案

【问题标题】：Custom Text for Drilldown Menu "Back" Button [Foundation 6]向下钻取菜单“返回”按钮的自定义文本 [Foundation 6]
【发布时间】：2017-04-07 15:05:48
【问题描述】：

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

例如，下钻菜单的工作原理如下：

我希望它能够这样工作：

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

【问题讨论】：

所以您希望标签显示“Back to Parent Name”而不是“Back”？
只是“父母姓名”。

标签： zurb-foundation zurb-foundation-6

【解决方案1】：

有几种方法可以做到这一点，但在我看来最简单的方法是这样的：

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

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

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

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

所有这一切都是在菜单结构中快速查找原始链接文本是什么，然后将其复制到新的后退按钮。

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

仅供参考：使用相同的标签在菜单中向前和向后指向存在一些轻微的可用性问题，因为用户可能会发现这令人困惑，尤其是在多个级别时。您可能已经考虑过这一点，我只是为了完整性而提及它。

【讨论】：

这是完美的——像我想象的那样工作——谢谢。你提出了一个很好的关于可用性问题的观点。这是我的想法，但想考虑另一种选择。也许是一些 A/B 测试。再次感谢！
没有问题，很乐意提供帮助。请检查您的代码的选择器，我不完全确定它们是通用的！
这很完美，但有没有办法让文本和箭头（用于向下钻取的箭头）相互独立？

【解决方案2】：

我无法更改项目中的菜单结构，因此我将其修复如下：

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

有了这个你就不需要额外的html标签了。

【讨论】：