我有一个侧边栏可以根据城市和性别等参数过滤人员。我需要面包屑,这样当我点击一个性别或城市时,它会删除新的面包屑,但它也必须保存以前的参数。像这样:
Home / sex / male / city / NY
但我有一个执行此操作的 jquery 代码:
Home / Sex /male (and when i click on city it does this:)
Home / City / NY (it erase the other)
我把代码留在这里:
$('.items label').on('click', function() {
var $this = $(this),
$bc = $('<div class="item"></div>');
$this.parents('li').each(function(n, li) {
var $a = $(li).children('label').clone();
($a.addClass("btn btn-default")).removeAttr("style margin-left");
$bc.prepend($a);
});
$('.btn-breadcrumb').html( $bc.prepend('<a href="#Home" class="btn btn-default"><i class="glyphicon glyphicon-home"></i></a>') );
return false;
})
http://jsfiddle.net/mPsez/3/这是我从这个页面得到的一个例子。这段代码的问题和我的一样;当您单击 test1、test2 或 test3 时,它会删除前一个。
最佳答案
试试这个:
//If we click on the anchor...
$('.items a').on('click', function () {
var $this = $(this),
$bc = $(".breadcrumb");
//We store the current path on the breadcrumb.
var previousValue = $bc.html();
//We delete the content of the breadcrumb.
$bc.html("");
//For each li item...
$this.parents('li').each(function (n, li) {
//we make a copy of the child anchor as we will want the same behaviour on our
//breadcrumb.
var $a = $(li).children('a').clone();
//and we attach the clone after the previous clone if there is any. We also
//insert a separator.
$bc.append(' / ', $a);
});
//Once we are done we attach our old value to the beginning of the breadcrumb.
$bc.prepend(previousValue);
//and we cancel the default behaviour of the anchor.
return false;
})
基本上我存储了以前的值,删除了面包屑并将旧值与新值结合起来。
关于jquery - 动态面包屑响应侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24576994/