我有 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 小部件。
有什么解决办法吗?
谢谢!!
最佳答案
$('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");
});
关于javascript - CSS 应用于嵌套 li 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42186566/