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

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

这里，当调用下拉菜单时，折叠类将更改元素的颜色。 btnBackground 是从 jquery 调用的，它将应用 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>