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

Question

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

例如,下钻菜单的工作原理如下:

我希望它能像这样运作:

我希望这是有道理的,让我知道我是否可以澄清.感谢您提供的任何见解.

Answer 1

有几种方法你可以做到这一点,但在我看来最直接的是这样的事情:

1)使用Foundations Drilldown选项设置新的常规后退按钮.例如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

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