javascript - 选择特定目标 jQuery

Question

如何为标签元素创建一个特定的目标，因为我想为特定的 i 标签添加一些类 icon，而父 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通过 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>