jquery - 动态面包屑
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16416842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery - dynamic breadcrumb
提问by user1970557
I'm trying to create a breadcrumb system for my site using the following:
我正在尝试使用以下内容为我的网站创建面包屑系统：
<div class="breadcrumb">
<div class="item"><a href="#home">Home / </a></div>
</div>
<div class="items">
<ul>
<li><a href="#test1">Test 1</a></li>
<li><a href="#test1">Test 2</a>
<ul>
<li><a href="">Level 1</a></li>
<li><a href="">Level 2</a></li>
</ul>
</li>
<li><a href="#test1">Test 3</a></li>
</ul>
</div>
What I'm looking to do is so when a user clicks on Test 1the breadcrumb is Home / Test 1, if they then click on Test 2and then Level 1, the breadcrumb will become Home / Test 1 / Level 2
我想做的是当用户点击Test 1面包屑时Home / Test 1，如果他们然后点击Test 2然后Level 1，面包屑将变成Home / Test 1 / Level 2
I've been looking at jQuery to do this, but not 100% sure how best to approach it.
我一直在寻找 jQuery 来做到这一点，但不是 100% 确定如何最好地接近它。
Any ideas would be much appreciated
任何想法将不胜感激
Thanks
谢谢
回答by David Fregoli
example http://jsfiddle.net/mPsez/3/
示例http://jsfiddle.net/mPsez/3/
$('.items a').on('click', function() {
var $this = $(this),
$bc = $('<div class="item"></div>');
$this.parents('li').each(function(n, li) {
var $a = $(li).children('a').clone();
$bc.prepend(' / ', $a);
});
$('.breadcrumb').html( $bc.prepend('<a href="#home">Home</a>') );
return false;
})
