Question

我现在试图寻找解决方案已有好几天，但只是没有得到。我用Bootstrap 4创建了一个带有下拉菜单的响应式Navbar。现在，我想在行尾用加号和减号替换插入记号，以显示在小型设备上，我想完全用CSS来实现。

因此，我为导航栏下拉列表创建了以下HTML。

 <!-- Navbar Top -->         
 <nav class="navbar navbar-expand-md navbar-custom navbar-light">
 <div class="container justify-content-between">    

    <!-- Toggler/collapsibe Button Menu -->
    <button class="navbar-toggler  mr-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbarMenu">
    <span class="navbar-toggler-icon"></span>
    </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbarMenu">
   <ul class="navbar-nav">
    <!-- Link -->
    <li class="nav-item">
      <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a> 
    </li>

    <!-- Dropdown About Us-->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        <i class="fab fa-jenkins d-lg-none d-xl-none" aria-hidden="true"></i> About  
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="{{ route('about') }}"> About Us</a>
        <a class="dropdown-item" href="{{ route('our-club') }}">Our Club</a>                               
        <a class="dropdown-item" href="{{ route('meetings') }}">Meetings</a>
      </div>
    </li>
 </ul>
</div>
</nav>

我的CSS

 @media only screen and (min-width: 768px) {
  .dropdown:hover .dropdown-menu{
     display:block;
  }
 }  

 [data-toggle="dropdown"]:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f067";
 }  

 [data-toggle="dropdown"]:hover:after {
    content: "\f068";
 }

我现在遇到的问题是，我得到一个加号，当我将鼠标悬停或单击它时它显示一个减号，但是当我再次单击它以关闭折叠的下拉菜单时，它保持减号直到我继续另一个下拉菜单。第二个问题是我仍然也显示了插入符号，因此不能替换它。有没有一种方法可以仅使用CSS来实现？

如果添加以下CSS，则可以删除插入符号，但这也会删除我的加号。

.dropdown-toggle::after {
  display:none;
}

Answer 1

您可能正在寻找这个：

[data-toggle="dropdown"]:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f067";
}

.show [data-toggle="dropdown"]:after {
  content: "\f068";
}
.dropdown-toggle {
  display: flex;
}
.dropdown-toggle:after {
  border: none;
}

简而言之，Bootstrap的插入符由border而不是content组成，并且您的content应该取决于下拉菜单的状态（打开-也称为.show），而不是在:hover上。

.dropdown-toggle[data-toggle="dropdown"]:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f067";
}

.show > .dropdown-toggle[data-toggle="dropdown"]:after {
  content: "\f068";
}
.dropdown-toggle[data-toggle="dropdown"] {
  display: flex;
}
.dropdown-toggle[data-toggle="dropdown"]:after {
  border: none;
}

/* 
 * I inflated [data-toggle]'s specificity by adding .dropdown-toggle to it as for 
 * some reason SO is loading bootstrap.min.css after the custom CSS
 * but you can use the CSS I posted in the answer if it's loaded after bootstrap.css
 * see it here: https://jsfiddle.net/websiter/wy46msvh/
 */

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<!-- Navbar Top -->
<nav class="navbar navbar-expand-md navbar-custom navbar-light">
  <div class="container justify-content-between">

    <!-- Toggler/collapsibe Button Menu -->
    <button class="navbar-toggler  mr-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbarMenu">
    <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbarMenu">
      <ul class="navbar-nav">
        <!-- Link -->
        <li class="nav-item">
          <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
        </li>

        <!-- Dropdown About Us-->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href id="navbardrop" data-toggle="dropdown">
            <i class="fab fa-jenkins d-lg-none d-xl-none" aria-hidden="true"></i> About  
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Bootstrap 4 Dropdown Navbar用Plus和Minus Fontawesome 5更改插入符号

1 个答案: