Question

如何为标记元素制作特定目标，因为我想为类i的特定icon标记添加一些类，而父li目标则折叠{ {1}}：

ul

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

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>

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

选择特定的目标jQuery

3 个答案: