Используя Bootstrap 4, как переключить div, родительский div которого скрыт под определенным разрешением? - PullRequest
Новая
       34

Используя Bootstrap 4, как переключить div, родительский div которого скрыт под определенным разрешением?

0 голосов
/ 28 мая 2018

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

enter image description here

Я дал навигационный элемент div class="d-none d-lg-block", чтобы все это отображалось только на большом экране и выше и скрывалось, когда оно меньше большого экрана.

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

enter image description here

, когда я нажимаю на Div1, я хочу, чтобы содержимое Item1 и Item2 в Div1чтобы быть переключенным.

Но просто давая разделу id="div1" и class="navbar-toggler", data-toggle="collapse" and data-target="#div1", этого не произойдет.Я также попытался дать div display: block, когда он с меньшим разрешением, но безрезультатно.

У меня есть скрипка: https://jsfiddle.net/chenhang91/u8b9cwmw/

Что может быть хорошим способом решения этой проблемыэлегантно?

Спасибо!

1 Ответ

0 голосов
/ 29 мая 2018

В предоставленном коде невозможно отобразить меню в родительском элементе, которое явно скрыто с помощью класса .container.d-none.d-lg-block.

Я предлагаю вам реструктурировать всеhtml:

  1. нет необходимости в дополнительном переключении подменю divs .small-screen-div, переключение для подменю можно назначить .nav-block-title.следовательно, мы перемещаем классы d-none.d-lg-block в собственное подменю (соответственно меняя d-lg-block на d-lg-inline-block) 

    <div class="nav-block-section">
  <div class="nav-block-title d-inline-block ml-0"><a data-toggle="collapse" href="#div3">Div3</a></div>
  <div class="collapse nav-block-navs d-none d-lg-inline-block" id="div3">
<div class="pb-2">
  <a href="#">Item1</a>
  <a href="#">Item2</a>
  <a href="#">Item3</a>
  <a href="#">Item4</a>
</div>
<div>
  <a href="#">Item1</a>
  <a href="#">Item2</a>
  <a href="#">Item3</a>
  <a href="#">Item4</a>
</div>

  2. в этом случае data-toggle = "collapse" требуется небольшая настройка в css, чтобы позволить переключение отображения независимо от того, какой сейчас медиа-запрос.

     @media (max-width:991px) {
 .nav-block-navs.collapse.show {
   display:inline-block !important;
  }
}

Пример

...