Question

如何将类添加到当前单击的元素？

这是我的HTML代码-

<ul>
  <li class="ClickToActive"><a href="#">Home</a></li>
  <li  class="ClickToActive"><a href="#">Services</a>
    <ul>
      <li ><a href="#">service1</a></li>
      <li ><a href="#">service2</a></li>
      <li ><a href="#">service3</a></li>
    </ul>
  </li>
</ul>

这是我的jquery代码-

<script>
  jQuery(document).ready(function($) {
    $('.ClickToActive').click(function(e){
      if ($(this).closest("li").children("ul").length) {
        $(this).parent().addClass("active");
        var id=$(this).closest("li").children("ul").attr('id');
      }else{
        $(this).addClass('active');
        var id=$(this).attr('id');
      }
      var arr = id.split('-');
      var menu_id=arr[2];
      $('html, body').animate({
        scrollTop: $("#"+menu_id).offset().top
      }, 500);
    });
  });
</script>

当我单击父级li时，只有该元素应该处于活动状态，而当我单击其子级时，该子项也应该处于活动状态。

我该如何实现？

Answer 1

当您单击类的子元素时，可以像下面这样添加类。

e.toElement.parentNode.classList.add("active");//e is the event

$(document).ready(function() {
    $('.ClickToActive').click(function(e){
      $('li').removeClass('active');
      $(this).closest('li').addClass('active');
      e.toElement.parentNode.classList.add("active");
      //e.toElement.classList.add("active");
      //If you want to add class to current element(a tag). then try this
    });
});

.active>a{
  background:red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="ClickToActive"><a href="#">Home</a></li>
  <li  class="ClickToActive"><a href="#">Services</a>
    <ul>
      <li ><a href="#">service1</a></li>
      <li ><a href="#">service2</a></li>
      <li ><a href="#">service3</a></li>
    </ul>
  </li>
</ul>

如何将类添加到jQuery中当前单击的元素？

1 个答案: