选择特定的目标 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()回调内部，您可以重复使用它并将<i> find()在里面。

另外，您的结束<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

您可以在不更改任何现有代码的情况下尝试此操作。

 $('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");
  });
});

Answer 3

您可以保存单击的链接并稍后使用它，我认为，添加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');
  });
})