Как сделать, чтобы меню гамбургера показывало выпадающий список - PullRequest
Новая
       41

Как сделать, чтобы меню гамбургера показывало выпадающий список

0 голосов
/ 22 апреля 2020

Я учусь Bootstrap 4, и у меня успешно получается, что содержимое моей панели навигации превращается в меню гамбургеров с меньшими размерами экрана, как я хочу. Проблема, с которой я сейчас сталкиваюсь, состоит в том, что одна из вещей, которая становится меню гамбургера, - это кнопка «Обзор», которая показывает раскрывающийся список при больших размерах экрана:

Browse button click

И оно становится меню гамбургера при меньших размерах экрана, но когда я щелкаю меню гамбургера, справа появляется кнопка «Обзор», и это не совсем то, что я хочу, чтобы это произошло:

Hamburger menu click

Я пытаюсь исключить щелчок при меньших размерах экрана, чтобы меню гамбургера отображало раскрывающийся список непосредственно при нажатии, вместо того, чтобы щелкать меню гамбургера и затем нажимать кнопка обзора, которая выскакивает.

Вот мой HTML: 

<!-- browse button hamburger menu button -->
<a class="navbar-toggler border" role="button" data-toggle="collapse" data-target="#navbarBrowseButton">
    <span class="navbar-toggler-icon text-center">
        <i class="fas fa-bars"></i>
    </span>
</a>

<!-- browse button collapse content -->
<div class="collapse navbar-collapse" id="navbarBrowseButton">
    <a class="btn btnBrowse dropdown-toggle" role="button" data-toggle="dropdown">Browse</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Games</a>
            <a href="#" class="dropdown-item">Popular Lists</a>

Я вынул ARIA для простоты, и я попытался дать своему dropdown-menu идентификатор и изменить data-target с разной степенью успеха, но он все еще работает так, как я хочу.

1 Ответ

1 голос
/ 22 апреля 2020

Вы можете использовать JS для него.

Добавлены bg-dark navbar-dark классы для переключения показа цели. 

$('#navbarBrowseButton').on('shown.bs.collapse', function() {
  $('#navbarBrowseButton .btnBrowse').click();
});

$('#navbarBrowseButton').on('hidden.bs.collapse', function() {
  $('#navbarBrowseButton').collapse('hide');
  $('#navbarBrowseButton').dropdown('hide');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- browse button hamburger menu button -->
<a class="navbar-toggler border bg-dark navbar-dark" role="button" data-toggle="collapse" data-target="#navbarBrowseButton">
  <span class="navbar-toggler-icon text-center">
            <i class="fas fa-bars"></i>
        </span>
</a>

<!-- browse button collapse content -->
<div class="collapse navbar-collapse" id="navbarBrowseButton">
  <a class="btn btnBrowse dropdown-toggle" role="button" data-toggle="dropdown">Browse</a>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Games</a>
    <a href="#" class="dropdown-item">Popular Lists</a>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
...