Question

  <div id="list">
      <ul>
        <li><a href="#">Product Category1</a></li>
        <li><a href="#">Product Category2</a></li>
        <li><a href="#">Product Category3</a></li>
        <li><a href="#">Product Category4</a></li>
        <li><a href="#">Product Category5
            <ul>
              <li><a href="#">Product subcategory1</a></li>
              <li><a href="#">Product subcategory2</a></li>
              <li><a href="#">Product subcategory3</a></li>
              <li><a href="#">Product subcategory4</a></li>
              <li><a href="#">Product subcategory5
                <ul>
                  <li><a href="#">Sub sub category1</a></li>
                  <li><a href="#">Sub sub category2</a></li>
                  <li><a href="#">Sub sub category3</a></li>
                  <li><a href="#">Sub sub category4</a></li>
                </ul>
              </a></li>
            </ul>
        </a></li>
      </ul>

产品类别5＆gt; <产品子类别5>子子类别4

如果“Sub sub category4”是点击页面加载，整个链接应该是活动类。

像产品类别5（这应该有活动类）＆gt;产品子类别5（这应该有活动类）＆gt;子子类别4（这应该有活动类）

只使用jquery或referer功能。

Answer 1

所以，对stackOverflow进行了搜索，使用代码查找多级父级，这似乎可以解决问题。请查看以下代码段：

＆＃13;

$.fn.nthParent = function(n) {
  var p = this;
  for (var i = 0; i < n; i++) {
    p.parents('li').first().find('a').first().addClass('active')
    p = p.parents('li').first();
  }
  return p;
}

$('a').on('click', function() {
  $(this).nthParent(4);
});

＆＃13;

.active {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list">
  <ul>
    <li><a href="#">Product Category1</a></li>
    <li><a href="#">Product Category2</a></li>
    <li><a href="#">Product Category3</a></li>
    <li><a href="#">Product Category4</a></li>
    <li><a href="#">Product Category5</a>
      <ul>
        <li><a href="#">Product subcategory1</a></li>
        <li><a href="#">Product subcategory2</a></li>
        <li><a href="#">Product subcategory3</a></li>
        <li><a href="#">Product subcategory4</a></li>
        <li><a href="#">Product subcategory5</a>
          <ul>
            <li><a href="#">Sub sub category1</a></li>
            <li><a href="#">Sub sub category2</a></li>
            <li><a href="#">Sub sub category3</a></li>
            <li><a href="#">Sub sub category4</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

＆＃13;

带有活动类的多级菜单

1 个答案: