Question

这是html结构

<ul>
  <li>
    <a href="#">Stone age</a> > active
    <ul>
      <li>
        <a href="#">Mesolithic</a> > active
        <ul>
          <li>
            <a href="#">Culture</a> > active
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Neolithic</a> > not active > click > this active the others not active
      </li>
    </ul>
  </li>
</ul>

当我点击第三级时，第一级失去活动的类，当我点击没有兄弟或父级的其他元素时，它会使该类处于活动状态，但不会将其从之前单击的项中删除。 / p>

$("a").on("click", function(e) {
    e.preventDefault();
    var $parent = $(this).parent().parent().parent().find("a");
    $("a").not($parent).not($parent.nextAll()).removeClass("active");
    $(this).toggleClass("active");
    $(this).nextAll("ul").toggleClass("closed opened");
});

jsFiddle

如何在兄弟姐妹，父母和其他元素之间切换“活动”类？

Answer 1

这样的事情：

＆＃13;

$("#myId a").on("click", function(e) {
    e.preventDefault();
  
      // first remove all active classes
      $(this).closest('#myId').find('a').removeClass('active');
       
      // then first add to clicked element
      $(this).addClass('active');
      // and to its parents
      $(this).parents().children('li a').addClass('active');
});

＆＃13;

.active {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="myId">
  <li>
    <a class="active">Stone age</a> > active
    <ul>
     <li>
       <a class="active">Mesolithic</a> > active
       <ul>
         <li>
           <a class="active">Culture</a> > active
         </li>
       </ul>
     </li>
     <li>
       <a>Neolithic</a>
       <ul>
     <li>
       <a>Mesolithic</a>
       <ul>
         <li>
           <a>Culture</a>
         </li>
       </ul>
     </li>
     <li>
       <a>Neolithic</a>
     </li>
    </ul>
     </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

如果您可以将id（或其他唯一标识方法）添加到顶级UL元素，这将变得更加容易。一种方法如下：

＆＃13;

$(function() {
	$('#menu a').on('click', function(e) {
		e.preventDefault();
		$('#menu a').removeClass('active');
		$(this).addClass('active').parents('li').parents('li').children('a').addClass('active').end().parents('li').children('a').addClass('active');
	});
});

＆＃13;

.active {
	color: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
  <li>
    <a>Stone age</a>
    <ul>
     <li>
       <a>Mesolithic</a>
       <ul>
         <li>
           <a>Culture</a>
         </li>
       </ul>
     </li>
     <li>
       <a>Neolithic</a>
     </li>
    </ul>
  </li>
</ul>

＆＃13;

$('#menu a').removeClass('active');行会从所有 A元素中删除活动类。下一行处理将类添加到所需元素，并且还有相当多的数量。

它从单击的元素（$(this)）开始，并将类添加到其中。接下来，它找到第一个父LI（它是单击元素的级别），然后上升另一个LI级别（对于单击元素的父级）。然后，它会在该元素中搜索任何直接子元素A元素，并将类添加到该元素中。然后通过调用.end()将其恢复为之前找到的元素（LI）。然后它再上升一级，再次找到直接子元素，并将类添加到它。

将类添加到单击的项目，父项和父项，并将其从所有其他项中删除

2 个答案: