Question

我制作了一个包含下拉列表的侧边栏。如果下拉列表是开放的。我希望<li class="nav-item nav-item-sidebar">（在整个下拉列表的顶部）具有某种CSS样式。这是

border-left: 3px solid #1ABB9C;
padding: 8px 8px 8px 5px;
background-color: #222732;

我怎样才能做到这一点？

HTML

<li class="nav-item nav-item-sidebar">
        <a class="nav-link" href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
            <i class="fal fa-thumbs-up fa-lg sidebar-icon"></i>
            <span class="sidebar-link">Dropdown</span>
            <span class="fal fa-angle-right fa-lg sidebar-arrow rotate-effect"></span>
        </a>
        <ul class="collapse list-unstyled" id="pageSubmenu">
            <li class="nav-item">
                <a href="#Bier1" class="nav-link sidebar-dropdown-nav-link">
                    <i class="fal fa-copy fa-lg sidebar-icon"></i>
                    <span class="sidebar-link">Files</span>
                    <span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#Bier2" class="nav-link sidebar-dropdown-nav-link">
                    <i class="fal fa-comments fa-lg sidebar-icon"></i>
                    <span class="sidebar-link">Comments</span>
                    <span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#Bier3" class="nav-link sidebar-dropdown-nav-link">
                    <i class="fal fa-image fa-lg sidebar-icon"></i>
                    <span class="sidebar-link">Pictures</span>
                    <span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
                </a>
            </li>
        </ul>
    </li>

我想这与a[aria-expanded="true"]有关，但我不确定。

我如何实现上述目标？

Answer 1

此处调用下拉列表时，折叠类将更改项目的颜色。并且从jquery调用btnBackground，它将应用css。试试这个。

在下拉项目中，加载默认css后会产生效果，但您可以在加载下拉列表时更改效果，这是为了显示颜色从默认值更改为您添加的css。

$(".dropdown-toggle").click(function() {
  $(this).toggleClass("btnBackground");
});

.btnBackground {
  border-left: 3px solid #1ABB9C;
  padding: 8px 8px 8px 5px;
  background-color: #222732;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<li class="nav-item nav-item-sidebar dropdown-toggle">
  <a class="nav-link" href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
    <i class="fal fa-thumbs-up fa-lg sidebar-icon"></i>
    <span class="sidebar-link">Dropdown</span>
    <span class="fal fa-angle-right fa-lg sidebar-arrow rotate-effect"></span>
  </a>
  <ul class="collapse list-unstyled" id="pageSubmenu">
    <li class="nav-item">
      <a href="#Bier1" class="nav-link sidebar-dropdown-nav-link">
        <i class="fal fa-copy fa-lg sidebar-icon"></i>
        <span class="sidebar-link">Files</span>
        <span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
      </a>
    </li>
    <li class="nav-item">
      <a href="#Bier2" class="nav-link sidebar-dropdown-nav-link">
        <i class="fal fa-comments fa-lg sidebar-icon"></i>
        <span class="sidebar-link">Comments</span>
        <span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
      </a>
    </li>
    <li class="nav-item">
      <a href="#Bier3" class="nav-link sidebar-dropdown-nav-link">
        <i class="fal fa-image fa-lg sidebar-icon"></i>
        <span class="sidebar-link">Pictures</span>
        <span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
      </a>
    </li>
  </ul>
</li>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 2

据我所知，您无法使用css访问父元素。但是在这里你有一个纯粹的css解决方案来存档你的目标。

.nav-item.nav-item-sidebar a[aria-expanded="true"], 
.nav-item.nav-item-sidebar a[aria-expanded="true"] + ul {
    border-left: 3px solid #1ABB9C;
    padding: 8px 8px 8px 5px; 
    background-color: #222732;
}

Here is the Fiddle

Bootstrap 4侧边栏下拉式咏叹调扩展了背景颜色

2 个答案: