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

Posted 2023-03-06

【中文标题】Bootstrap 4 Dropdown Navbar 使用 Plus 和 Minus Fontawesome 5 更改插入符号

【英文标题】：Bootstrap 4 Dropdown Navbar change caret with Plus and Minus Fontawesome 5

【发布时间】：2019-05-29 06:05:56

【问题描述】：

我这几天一直在努力寻找解决方案，但就是不明白。我已经使用 Bootstrap 4 创建了一个带有下拉菜单的响应式导航栏。我现在想在行尾用加号和减号替换插入符号以显示在小型设备上，我想完全使用 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;

【问题讨论】：

您使用的是 Font Awesome 5 JS+SVG 版本吗？如果有，你读过this吗？

老实说，这是一个很好的问题，但我认为不会。我使用 Laravel 5.7 并将 "@fortawesome/fontawesome-free": "^5.6.3" 添加到我的 package.json 中，然后我添加了 @import '~@fortawesome/fontawesome-free/css/all.min.css';到我的 app.scss，然后运行 ​​npm run watch。之后它就起作用了。

【参考方案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>

【讨论】：

谢谢。插入符号消失了，但是当我点击汉堡图标时，两个下拉菜单（我刚刚添加了另一个下拉菜单）都显示了减号，所以在我点击“关于”之前，加号变成了减号，并且两者都打开了他们。有什么想法吗？

非常感谢，它正在工作。这可能是一个缓存问题，我已经重建它，现在它正在工作！太棒了，非常感谢。我只是想不通，现在它终于可以工作了。

这很有趣。好奇是否可以让About 成为链接并且独立于加号图标。所以，加号会扩大，但关于会链接。能做到吗？