javascript - CSS 应用于嵌套 li 问题

Question

我有 ul 列表，其中有一些 li 也嵌套了 li。

我在 li 的 onclick 中添加了 js，它改变了 li 的 bgcolor，但问题是它也传播到嵌套的 li。

我的代码是:

 <  ul >
    < li >

       < a > first </ a>

    /%nested ul starts here%/
     <li> 
        Nested Word
     </li>
   </li>
</ul>

JavaScript:

$('li').click(function(e){


   $(this).addClass("active1");
   $(this).find('a').addClass("acolor");

  });

CSS

 .acolor
 {
  color: #FFFFFF !important;
 }

.active1
{
  background-color:#536574 !important;

}

问题是当我将 bg 颜色应用到主 div 时，它也通过 nesed li 的填充应用到附近，我不需要。我只需要 bg 颜色来应用第一个文本而不是任何地方到它的 child 。

-> 我无法更改 HTML 结构，因为它的代码已经来自 Drupal 小部件。

有什么解决办法吗？

谢谢!!

Answer 1

$('li') jQuery 语句选择每个 <li>在您的 DOM 中，包括您不想选择的那些。如果您只想更改文本元素(<a> 标签)的背景颜色，您可以像这样重写语句:

$('a').click(function(e){
   $(this).addClass("active1");
   $(this).find('a').addClass("acolor");
});

或者如果您只想选择第一个 <li>在你的里面<ul> ，像这样选择它们:

$('ul li:first-child').click(function(e){
   $(this).addClass("active1");
   $(this).find('a').addClass("acolor");
});