Question

我有一个侧边栏可以过滤一些参数，比如城市和性别。我需要面包屑，以便当我点击性别或城市时，它会消除新的面包屑，但它也必须保存以前的参数。像这样：

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时，它会删除前一个。

Answer 1

试试这个：

//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;
})

基本上我存储了以前的值，删除了痕迹并将旧值与新值联合起来。

动态面包屑用侧边栏响应

1 个答案: