Как установить Bootstrap выпадающее меню при наведении? - PullRequest
Новая
       1

Как установить Bootstrap выпадающее меню при наведении?

0 голосов
/ 12 февраля 2020

Я редактировал пример bootstrap navbar и вставил необходимый скрипт и ссылки css в тег head. Я хочу изменить раскрывающийся список по умолчанию, чтобы он зависал при нажатии кнопки. Я попытался ввести стиль в css, написав .dropdown: hover .dropdown menu {display: block;}, но это не сработало. Я думаю, что это как-то связано со ссылками, но я не уверен.

Это мой код: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XXX Dental Clinic</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="../website bootstrap/css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>
<body>    
      <nav class="navbar navbar-expand-md navbar-light bg-white">
        <a class="navbar-brand" href="#"><img src="https://i.pinimg.com/474x/b7/a3/43/b7a3434f363c38d73611694b020a503e.jpg" alt="logo" width="70"></a>        
        <button class="navbar-toggler" type="button" data-toggle="collapse"
        data-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"> </span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active px-2">
  <a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item px-2">
  <a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown px-2" >
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" 
  data-toggle="dropdown">Our Services</a>

  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  <a class="dropdown-item" href="#">item1</a>
  <a class="dropdown-item" href="#">item2</a>

</div>
</li>
<li class="nav-item">
  <a class="nav-link" href="#">Contact Us</a>
</li>

</ul>
</div>
</nav>

</body>
</html>

Ответы [ 2 ]

4 голосов
/ 12 февраля 2020

Чистый CSS: 

li.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-white">
  <a class="navbar-brand" href="#"><img src="https://i.pinimg.com/474x/b7/a3/43/b7a3434f363c38d73611694b020a503e.jpg" alt="logo" width="70"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"> </span>
    </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active px-2">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item px-2">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item dropdown px-2">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Our Services</a>

        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">item1</a>
          <a class="dropdown-item" href="#">item2</a>

        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>

    </ul>
  </div>
</nav>

jQuery решение:

Просто добавьте .show класс к .dropdown и .dropdown-menu

$('li.nav-item.dropdown').hover(function() {
  $(this).addClass('show')
  $(this).find('.dropdown-menu').addClass('show')
}, function() {
  $(this).removeClass('show')
  $(this).find('.dropdown-menu').removeClass('show')
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-white">
  <a class="navbar-brand" href="#"><img src="https://i.pinimg.com/474x/b7/a3/43/b7a3434f363c38d73611694b020a503e.jpg" alt="logo" width="70"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"> </span>
    </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active px-2">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item px-2">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item dropdown px-2">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Our Services</a>

        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">item1</a>
          <a class="dropdown-item" href="#">item2</a>

        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>

    </ul>
  </div>
</nav>
0 голосов
/ 12 февраля 2020

Добавьте ниже CSS в голове в HTML и все будет работать нормально: 

  <style type="text/css">
    .navbar-nav li:hover>.dropdown-menu {
      display: block;
    }
 </style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...