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

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

Нажмите кнопку обзора

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

Нажмите меню гамбургера

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

Вот мой 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 с разной степенью успеха, но теперь он все еще работает так, как я хочу.


bootstrap-4 hamburger-menu
person Jay    schedule 21.04.2020    source источник
comment
Короче говоря, у вас есть проблемы с маленькими экранами, и вам нужно, когда вы нажимаете на меню гамбургера, просматривать открытое меню?   -  person Nisharg Shah    schedule 22.04.2020
comment
да, выпадающее меню появляется, когда вы нажимаете кнопку «Обзор», и это именно то, что я хочу, чтобы происходило, когда вы нажимаете меню гамбургера, я хочу, чтобы оба щелчка делали одно и то же, покажите раскрывающееся меню   -  person Jay    schedule 22.04.2020
comment
смотри мой ответ бро   -  person Nisharg Shah    schedule 22.04.2020
comment
Я видел это, но кнопка «Обзор» по-прежнему выскакивает, когда я нажимаю кнопку «гамбургер» и перекрывает текст заголовка, и я пытался заставить его отображать только меню, а не кнопку «Обзор». У меня это выглядит нормально и теперь не перекрывается, когда я возился с z-индексом. Спасибо за это.   -  person Jay    schedule 22.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать для этого 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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

person Nisharg Shah    schedule 21.04.2020
comment
Спасибо, Нишарг, это работает, но кнопка «Обзор» по-прежнему выскакивает справа от меню гамбургера у меня, а не под ним, как в вашем фрагменте. Любая идея, как я могу сделать так, чтобы он отображался внизу? Потому что я на самом деле предпочел бы это, это выглядит лучше, имхо - person Jay; 22.04.2020
comment
Я думаю, это потому, что у вас есть собственный CSS на вашей странице, и он конфликтует с вашим кодом. - person Nisharg Shah; 22.04.2020
comment
это в <div class="row"> Интересно, влияет ли это на направление? - person Jay; 22.04.2020
comment
дайте flex-column своему родительскому классу, я думаю, это сработает, а если нет, опубликуйте новый новый вопрос - person Nisharg Shah; 22.04.2020