2017-04-07 21 views
2

雖然我知道我可以使用數據後退按鈕來更改我的向下鑽取菜單上的文本,是否可以更改它們以反映父母鑽取是?自定義文字的向下鑽取菜單「返回」按鈕[基礎6]

例如,向下鑽取菜單工作這樣: Example 1

我想它作爲這樣: Example 2

我希望這是有道理的,讓我知道如果我能澄清。感謝您提供的任何見解。

+0

所以你想讓標籤說「返回父母名稱」而不是「返回」? –

+0

只是「父母名稱」。 –

回答

3

有幾個方法可以做到這一點,但最簡單的,在我看來是這樣的:

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

FYI:有一些輕微的可用性問題與使用相同的標籤,向前和向後指向菜單,因爲用戶可以找到這個令人困惑,特別是在很多層面上。你可能已經考慮到了這一點,我只是爲了完整性而提及它。

+0

這是完美的 - 我想像中的作品 - 謝謝。您提出可用性問題的一個好處。這是我想到的,但想考慮一個替代選擇。也許有些A/B測試。再次感謝! –

+1

沒有probs,很樂意提供幫助。儘管檢查選擇器的代碼,但我不完全確定它們是通用的! – tymothytym