Question

我面临的一个问题是jQuery parent ul li open下面是我的html结构：

<div>
  <ul>
     <li class="has-sub">
        <a href="#">1</a>
        <ul>
           <li><a href="#">1.1</a></li>
           <li><a href="#">1.2</a></li>
           <li class="has-sub">
             <a href="#">2</a>
             <ul>
                <li><a href="#">2.1</a></li>
                <li><a href="#">2.2</a></li>
                <li class="has-sub">
                  <a href="#">3</a>
                  <ul>
                      <li><a href="#">3.1</a></li>
                      <li><a href="#">3.2</a></li>
                      More...
                  </ul>
                </li>
             </ul>
           </li>
        </ul>
     </li>
  </ul>
</div>

jQuery的：

$(function () {
  $('a').each(function () {
    if ($(this).prop('href') == window.location.href) {
        $(this).addClass('activation');
    }
  });
});

的CSS：

.open > a:after,
.open > a:before {
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(89deg);}

activation类添加，但不能打开父级别。

我需要激活哪个类，然后这个父级别开放。

我如何才能达到此解决方案？

Answer 1

这似乎是你要问的问题：

$(function() {
  $('a').click(function() {
    if ($(this).prop('href') == window.location.href) {

      $('li').removeClass('open');
      $('a').removeClass('activation');
      $(this).addClass('activation').closest("li").addClass("open");
    }
  });
});

Here is the JSFiddle demo

通过Inspect Element检查结构。

Answer 2

你需要使用以下js：

$(function() {
  $('a').removeClass('activation');
  $('ul').removeClass('open');
  $('a').each(function() {
    if ($(this).attr('href') == '#') { //replace your url
      $(this).addClass('activation');
      $(this).parent().parent().addClass('open');
    }
  });
});

查找工作 DEMO

Answer 3

这是我最后的jQuery代码：

$(function () {
  $('a').each(function () {
    if ($(this).prop('href') == window.location.href) {
        $(this).addClass('activation');
        $(this).parent().closest('.has-sub').addClass('open active');
    }
  });
});

但现在只能在第二或第四位置工作第二位

的CSS：

.active {
  display: block;
}

使用jQuery跟踪/激活单击的文章

3 个答案: