Question

我想用我的网站的下拉菜单创建面包屑

我需要将此现有列表转换为

<div class="menu">
  <ul>
    <li>
      <a href="#">GRANDPARENT A</a> <!-- comment -->
        <ul>
          <li><a href="#?AAA">PARENT A</a> <!-- comment -->
            <ul>
              <li><a href="#">CHILD A</a>
              </li>
              <li><a href="#">child b</a>
            </ul>
          </li>
          <li><a href="">parent b</a>
          </li>
        </ul>
    </li>
    <li>
      <a href="#">grandparent b</a> <!-- comment -->
    </li>
</ul>
</div>

这种格式（包括在当前路径中添加一个类）：

<li>
  <a class="current" href="#">GRANDPARENT A</a> <!-- comment -->
  <ul>
     <li>
       <a href="#">grandparent b</a> <!-- comment -->
     </li>
  </ul>
</li>
<li><a class="current" href="#?AAA">PARENT A</a> <!-- comment -->
  <ul>
    <li><a href="">parent b</a>
    </li>
  </ul>
</li>             
<li><a class="current" href="#">CHILD A</a>
  <ul>
    <li><a href="#">child b</a>
    </li>
  </ul>
</li>

我尝试了很多，却无法取得好成绩。我会优先选择php，但只能在js中找到解决方案。

Answer 1

这是我到目前为止找到的脏解决方案（它还会过滤掉

将类取消链接并使用空hrefs的链接）：

            var url = window.location.href; //.split('?')[0];
            var currentItem = $(".menu").find("[href$='" + url +  "']");
            var breadcrumString = "";
            var parrentItem = "<a href='/'>Start</a>";
            var currentSubItems = "";
            var breadcrumbStringSub = "";                   
            if (currentItem.parent("li").children().children().length > 0){
                currentSubItems = currentItem.parent("li").children().children();
                breadcrumbStringSub += '<ul>';
                    currentSubItems.each(function() {
                            if (($(this).children("a")[0]) && $(this).children("a").get(0).outerHTML != '<a href=""></a>' && $(this).get(0).className != 'unlisted'){
                            breadcrumbStringSub += "<li>" +
                            $(this).children("a").get(0).outerHTML +
                            "</li>";
                            } else {};                          
                        }); 
                    breadcrumbStringSub += "</ul>"; 
            breadcrumbStringSub += '</ul>';                     
                }
            $(currentItem.parents("li").get().reverse()).each(function () {
                if ($(this).parent().children().not(this).length > 0){
                 breadcrumString += "<li>" + parrentItem;
                 $(this).children("a").get(0).outerHTML;
                 $(this).parent().children().each(function() {                      
                  if ($(this).children("a")[0] && $(this).children("a").get(0).outerHTML != '<a href=""></a>' && $(this).get(0).className != 'unlisted'){
                    breadcrumString += "<li><a href='" +
                    $(this).children("a")[0] +  "'>" +
                    $(this).children("a").html() + "</a>" +
                    "</li>";
                  } else {};
                }); 
                breadcrumString += "</ul>"; 
                } else {
                breadcrumString += "<li>" + parrentItem;                
                }
                breadcrumString += "</li>";     
                parrentItem = $(this).children("a").get(0).outerHTML;
            });     
            breadcrumString += '<li>' + parrentItem + breadcrumbStringSub + '</li>';
            $(".breadcrumb").append(breadcrumString);
            $(".breadcrumb li a").not(".breadcrumb li ul li a").addClass("current")

使用javascript或php从现有版本构建新列表

1 个答案: