jquery - 我被面包屑 jQuery 困住了

Question

我想在我的网站中用 jQuery 创建面包屑。但我被困住了。

这是我的编码如下：

<ul id="bc" class="bc">
     <li><a href="www.test.com/index.php">Home</a></li>
     <li><a href="www.test.com/about.php">About us</a>
         <ul>
            <li><a href="www.test.com/1.php">1</a></li>
            <li><a href="www.test.com/2.php">2</a></li>
        </ul>
    </li>

$(document).ready(function(){
    var str=location.href.toLowerCase();
    $(".bc li a").each(function() {
      if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
           $("li.highlight").removeClass("highlight");
           $(this).parent().addClass("highlight");
           var outerNav = $(this).parent().parent().parent();
           var outerNav2 = $(this).parent().parent().parent().parent().parent();

           if(outerNav.is("li")) {
              outerNav.addClass("highlight");
           }
           if(outerNav2.is("li")) {
              outerNav2.addClass("highlight");
           }
           document.title=$(this).text();
      }
    });

})

我需要这样的：

当我点击关于我们时：

首页-->关于我们

当我点击 1 时：

首页-->关于我们-->1

Answer 1

尝试

$(function() {

    var str = location.href.toLowerCase();

    var el = $('.bc li a[href="' + str + '"]').parent();
    if (el.length) {
        var els = [];
        do {
            el.addClass('highlight');
            els.push(el);
            el = el.parent().closest('li');
        } while (el.length && !el.parent().is('.bc'));
        el.addClass('highlight');

        while (el.length) {
            els.push(el);
            el = el.prev();
        }

        var arr = $.map(els, function(v, i) {
                    return $('a', v).text();
                }).reverse();
        document.title = arr.join('-->');
    }

});

演示：小提琴