Jquery 以白色背景色显示单击的项目

Jquery 以白色背景色显示单击的项目,jquery,css,Jquery,Css,我有一个侧边栏菜单,有一些链接,也有一些链接也有子链接 当侧边栏的某个链接或子链接被单击,并且url更改为该页面时,我想为单击的链接/子链接添加白色背景色。这部分工作正常 但是,如果它是一个子链接,除了添加白色背景外,我还希望子菜单可见,以便具有白色背景的子链接也可见。这部分不起作用。你知道怎么做那部分吗 工作示例: HTML: JS: JS: 这将查看父级的父级是否为ul,如果是,则添加show类 注意:您应该在问题中添加您正在使用引导 <div class="bg-orange"&g

我有一个侧边栏菜单,有一些链接,也有一些链接也有子链接

当侧边栏的某个链接或子链接被单击,并且url更改为该页面时,我想为单击的链接/子链接添加白色背景色。这部分工作正常

但是,如果它是一个子链接,除了添加白色背景外,我还希望子菜单可见,以便具有白色背景的子链接也可见。这部分不起作用。你知道怎么做那部分吗

工作示例:

HTML:

JS:

JS:

这将查看父级的父级是否为
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');
    }
  }
});