Bootstrap 4 Dropdown Navbar сменить каретку с Плюс и Минус Fontawesome 5 - PullRequest
Новая
       26

Bootstrap 4 Dropdown Navbar сменить каретку с Плюс и Минус Fontawesome 5

0 голосов
/ 02 января 2019

Я пытаюсь найти решение в течение нескольких дней, но просто не понимаю.Я создал отзывчивый Navbar с выпадающими списками с 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;
}

1 Ответ

0 голосов
/ 02 января 2019

Вы, вероятно, ищете это: 

[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>
...