向下钻取菜单的自定义文本＆＃34;返回＆＃34;按钮[基础6]

Question

虽然我知道我可以使用数据后退按钮来更改我的下钻菜单上的文字，是否可以更改它们以反映下钻的父母是什么？

例如，下钻菜单的工作方式如下：

我希望它可以这样运作：

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

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添加了一个新类，供以后用于设置文本。

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

仅供参考：在菜单中使用相同的标签指向前进和后退有一些温和的可用性问题，因为用户可能会发现这种混淆，特别是在许多级别。您可能已经考虑过这一点，我只是为了完整性而提到它。

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标签。