jQuery-动态面包屑 [英] jquery - dynamic breadcrumb

问题描述

我正在尝试使用以下方法为我的网站创建一个面包屑系统:

<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>

我要做的是，当用户单击Test 1时，面包屑为Home / Test 1；如果用户随后单击Test 2，然后单击Level 1，则面包屑将变为Home / Test 1 / Level 2

我一直在寻找jQuery来做到这一点，但不是100％地确定如何最好地实现它.

任何想法都将不胜感激

谢谢

解决方案

示例 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;
}) 

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 1 the breadcrumb is Home / Test 1, if they then click on Test 2 and then Level 1, the breadcrumb will become Home / Test 1 / Level 2

I've been looking at jQuery to do this, but not 100% sure how best to approach it.

Any ideas would be much appreciated

Thanks

解决方案

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

这篇关于jQuery-动态面包屑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！