Jquery 以白色背景色显示单击的项目
我有一个侧边栏菜单,有一些链接,也有一些链接也有子链接 当侧边栏的某个链接或子链接被单击,并且url更改为该页面时,我想为单击的链接/子链接添加白色背景色。这部分工作正常 但是,如果它是一个子链接,除了添加白色背景外,我还希望子菜单可见,以便具有白色背景的子链接也可见。这部分不起作用。你知道怎么做那部分吗 工作示例: HTML: JS: JS: 这将查看父级的父级是否为Jquery 以白色背景色显示单击的项目,jquery,css,Jquery,Css,我有一个侧边栏菜单,有一些链接,也有一些链接也有子链接 当侧边栏的某个链接或子链接被单击,并且url更改为该页面时,我想为单击的链接/子链接添加白色背景色。这部分工作正常 但是,如果它是一个子链接,除了添加白色背景外,我还希望子菜单可见,以便具有白色背景的子链接也可见。这部分不起作用。你知道怎么做那部分吗 工作示例: HTML: JS: JS: 这将查看父级的父级是否为ul,如果是,则添加show类 注意:您应该在问题中添加您正在使用引导 <div class="bg-orange"&g
ul
,如果是,则添加show
类
注意:您应该在问题中添加您正在使用引导
<div class="bg-orange">
<div class="sidebar-container">
<nav id="sidebar">
<ul>
<li><a href="">Item 0</a></li>
<li>
<a href="#item" data-toggle="collapse" aria-expanded="false">
Item 1
</a>
<ul class="collapse" id="item">
<li><a href="/item0">Item 1.1</a></li>
<li><a href="/item1">Item 1.2</a></li>
</ul>
</li>
<li><a href="">Item 2</a></li>
<li>
<a href="#item2" data-toggle="collapse" aria-expanded="false">
Item 2
</a>
<ul class="collapse" id="item2">
<li><a href="/item2">Item 2.1</a></li>
<li><a href="/item3">Item 2.2</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
.bg-orange{
background-color:orange;
}
ul{
list-style:none;
}
a.active{
background-color:white;
}
#sidebar {
color: #fff;
transition: all 0.3s;
}
#sidebar ul li a {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
color: gray;
}
#sidebar ul li a:hover {
color: gray;
text-decoration: none;
}
#sidebar ul li.active > a{
background: white;
}
ul ul a {
padding-left: 30px !important;
background:red;
}
#sidebar.active {
margin-left: 0;
}
$("#sidebar a").each(function() {
if (this.href == window.location.href) {
if($(this).parent('li').length == 5){
$(this).parents('ul.collapse').siblings('a').addClass('active');
}
else{
$(this).addClass("active");
}
}
});
$('#sidebar a').each(function() {
if (this.href == window.location.href) {
$(this).addClass('active');
let parent = $(this).parent('li').parent('ul');
if (parent) {
parent.addClass('show');
}
}
});