SideNavbar 菜单轮廓颜色和单击的导航栏项背景颜色

Question

我有以下代码，我想更改菜单项的轮廓颜色（当前为灰色）。

我还想更改在较小设备上使用的菜单项的颜色。我有一个下拉汉堡包，当我单击一个项目时，该项目的背景颜色会从灰色变为蓝色。

我在我的 css 上找不到那些，所以我认为代码使用了一些 boostrap css 选项。

// Hide submenus
$('#body-row .collapse').collapse('hide');

// Collapse/Expand icon
$('#collapse-icon').addClass('fa-angle-double-left');

// Collapse click
$('[data-toggle=sidebar-colapse]').click(function() {
    SidebarCollapse();
});

function SidebarCollapse () {
    $('.menu-collapsed').toggleClass('d-none');
    $('.sidebar-submenu').toggleClass('d-none');
    $('.submenu-icon').toggleClass('d-none');
    $('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');

    // Treating d-flex/d-none on separators with title
    var SeparatorTitle = $('.sidebar-separator-title');
    if ( SeparatorTitle.hasClass('d-flex') ) {
        SeparatorTitle.removeClass('d-flex');
    } else {
        SeparatorTitle.addClass('d-flex');
    }

    // Collapse/Expand icon
    $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
}

#body-row {
    margin-left: 0;
    margin-right: 0;
}



/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
    width: 230px;
}

.sidebar-collapsed {
    width: 60px;
}

/* Menu item*/
#sidebar-container .list-group a {
    height: 50px;
    color: black;
}

/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
    height: 45px;
    padding-left: 30px;
}

.sidebar-submenu {
    font-size: 0.9rem;
}

/* Separators */

/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
    content: " \f0d7";
    font-family: FontAwesome;
    text-align: right;
}

/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
    content: " \f0da";
    font-family: FontAwesome;
    text-align: right;
}

.menu-collapsed{
  color:black;
}

.sp
{margin-right: 20px;}

.list-group{
  margin-top: 140%;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="sss.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

</head>
<body>


  <!-- Bootstrap NavBar -->
  <nav class="navbar navbar-expand-md">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <i class="bi bi-list"></i>
</span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ml-auto">
              <!-- This menu is hidden in bigger devices with d-sm-none.
             The sidebar isn't proper for smaller screens imo, so this dropdown menu can keep all the useful sidebar itens exclusively for smaller screens  -->
              <li class="nav-item dropdown d-sm-block d-md-none">
                      <a class="dropdown-item" href="#top">Home</a>
                      <a class="dropdown-item" href="#top">Profile</a>
                      <a class="dropdown-item" href="#top">Tasks</a>
                      <a class="dropdown-item" href="#top">Etc ...</a>

              </li><!-- Smaller devices menu END -->
          </ul>
      </div>
  </nav><!-- NavBar END -->

  <!-- Bootstrap row -->
  <div class="row" id="body-row">
      <!-- Sidebar -->
      <div id="sidebar-container" class="sidebar-expanded d-none d-md-block">
          <!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
          <!-- Bootstrap List Group -->
          <ul class="list-group">

              <!-- Menu with submenu -->
              <a href="#submenu1" data-toggle="collapse" aria-expanded="false" class=" list-group-item list-group-item-action flex-column align-items-start">
                  <div class="d-flex w-100 justify-content-start align-items-center">
                      <span class="fa fa-dashboard fa-fw mr-3"></span>
                      <i class="bi bi-pencil sp"></i>

                      <span class="menu-collapsed">Dashboard</span>
                      <span class="bi-layers-fill ml-auto"></span>
                  </div>
              </a>
              <!-- Submenu content -->
              <div id='submenu1' class="collapse sidebar-submenu">
                  <a href="#" class="list-group-item list-group-item-action     ">
                    <i class="bi bi-pencil sp"></i>
                      <span class="menu-collapsed">Chahgag</span>

                  </a>
                  <a href="#" class="list-group-item list-group-item-action     ">
                      <span class="menu-collapsed">Reports</span>
                  </a>
                  <a href="#" class="list-group-item list-group-item-action     ">
                      <span class="menu-collapsed">Tables</span>
                  </a>
              </div>

              <a href="#" class="list-group-item list-group-item-action">
                  <div class="d-flex w-100 justify-content-start align-items-center">
                      <span class="fa fa-tasks fa-fw mr-3"></span>
                      <span class="menu-collapsed">Tasks</span>
                  </div>
              </a>

              <a href="#" class="list-group-item list-group-item-action">
                  <div class="d-flex w-100 justify-content-start align-items-center">
                      <span class="fa fa-calendar fa-fw mr-3"></span>
                      <span class="menu-collapsed">Calendar</span>
                  </div>
              </a>

          </ul><!-- List Group END-->
      </div><!-- sidebar-container END -->

</body>
</html>

Answer 1

单击时下拉项变为蓝色，对吗？如果您签入 devtools，background-color: blue 将添加到 dropdown-item 类中的 :active 状态，即单击时。

要在单击下拉项时更改其他内容的蓝色，您需要准确访问单击状态。在这种情况下，可以通过:active CSS Selector 来完成。

所以，在你的 CSS 中，你基本上应该这样做：

.dropdown-item:active {
    background-color: "your_color_here";
}

如果还是不行，试试加!important：

.dropdown-item:active {
        background-color: "your_color_here" !important;
    }

我没有测试过任何这些代码，所以如果这些提示没有帮助，请放弃 codepen 或 sn-p 以便可以快速轻松地测试它。

Answer 2

对于轮廓颜色，我找到了答案。 仍在寻找第二个问题。