Question

我有一个带有一些链接的侧边栏菜单，还有一些链接也有子链接。

当点击侧边栏的某个链接或子链接并且网址更改为该网页时，我想为该点击的链接/子链接添加白色背景颜色。这部分工作正常。

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

HTML：

<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>

CSS

.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;
}

JS：

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

Answer 1

JS：

$('#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');
    }
  }
});

这将查看父项的父项是否为ul，如果是，则添加show类。

Fiddle

注意：您应该在问题中添加您正在使用引导程序。

显示带有白色背景颜色的点击项目

1 个答案: