选择特定的目标jQuery

Question

如何为标签元素指定特定的目标，因为我想为带有类icon的特定i标签添加一些类，而父级li目标折叠了ul ：

 $('ul li').on('click', function(e) { e.stopPropagation(); $(this).children('ul').slideToggle('slow', function() { // add class to the 'i' tag element }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <a> <li> <span>Menu</span> <span><i class="icon"></i></span> <ul> <a><li>Sub menu1</li></a> <a><li>Sub menu1</li></a> </ul> </li> </a> <a> <li>Other Menu</li> </a> <a> <li>Other Menu</li> </a> <a> <li>Other Menu</li> </a> <a> <li> <span>Menu</span> <span><i class="icon"></i></span> <ul> <a><li>Sub menu1</li></a> <a><li>Sub menu1</li></a> </ul> </li> </a> </ul> 

Answer 1

您可以将单击的<li>元素存储在本地变量中，例如$this 。 然后从slideToggle()回调内部，您可以重复使用它并在内部find() <i> 。

另外，您关闭的<a>标签是错误的，它必须是</a>而不是<a/> 。 并且<ul>只能具有<li>元素作为直接子节点。 如果您要实现的目标仅仅是拥有一个手形光标，则只需设置cursor: pointer vias CSS，或者直接将链接放在<li>内部即可。

演示类的工作示例展示了它的作用：

 $('ul li').on('click', function(e) { e.stopPropagation(); var $this = $(this); $this.children('ul').slideToggle('slow', function() { $this.find('i').addClass('aclass'); }); }) 

 /* test style: */ ul li { cursor: pointer; } ul li i.aclass { border: solid red 2px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <span>Menu</span> <span><i class="icon"></i></span> <ul> <a><li>Sub menu1</li></a> <a><li>Sub menu1</li></a> </ul> </li> <li>Other Menu</li> <li>Other Menu</li> <li>Other Menu</li> <li> <span>Menu</span> <span><i class="icon"></i></span> <ul> <a><li>Sub menu1</li></a> <a><li>Sub menu1</li></a> </ul> </li> </ul> 

Answer 2

您可以保存单击的链接，以后再使用它，我认为，添加preventDefault是防止滚动页面的好方法。

$('ul li').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  const $link = $(e.target);

  $link.children('ul').slideToggle('slow', function() {
     $link.find('i').addClass('aclass');
  });
})

Answer 3

您可以尝试此操作，而无需更改任何现有代码。

 $('ul li').on('click', function(e) {
  e.stopPropagation();
  $(this).children('ul').slideToggle('slow', function() {
    // add class to the 'i' tag element
    $(this).prev().find("span>i.icon").addClass("someclass");
  });
});