Как показать / скрыть боковую панель в зависимости от нажатия кнопки и размера экрана?

Question

Я создал пользовательскую навигационную боковую панель для своей панели. Внутри этой боковой панели у меня есть несколько вариантов меню. Когда у меня маленький размер экрана, я хочу, чтобы все пункты меню исчезали и отображался только один элемент меню especifi c. Этот пункт меню especifi c используется как кнопка, которую можно использовать для повторного отображения всех итенов.

Меню:

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

Для моего меню боковой панели я использую код, приведенный ниже:

<div class="card-body">

<a id="shmenulinks" class="nav-link" style="border-radius: 0.25rem; cursor: pointer; width: 100%;" data-toggle="collapse" aria-expanded="true" aria-controls="menulinks" data-target="#menulinks"><i class="fa fa-bars" aria-hidden="true"></i> Open/Close menu</a>

<div id="menulinks" class="nav nav-pills" >
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-home" aria-hidden="true"></i> Home</a>
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-line-chart" aria-hidden="true"></i> Projects</a>
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-suitcase" aria-hidden="true"></i> Jobs</a>
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</div>

</div>

Для того, чтобы пункты меню появлялись / исчезали, я использую это CSS logi c ниже:

@media screen and (min-width: 992px) {

#shmenulinks {
display: none;
}
#menulinks {
display: block;
}
}

@media screen and (max-width: 991px) {
#shmenulinks {
display: block;
}
#menulinks {
display: none;
}

}

Моя проблема в том, что мой экран маленький и мое меню свернуто, Кнопка, которая может использоваться для отображения / исчезновения пунктов меню, не работает.

CODEPEN: https://codepen.io/neyelson-alves/pen/ZEGbdJB

Что мне делать?

Answer 1

Есть классы, доступные для использования свойств отображения для всех точек останова. Если вы хотите скрыть некоторые меню только на средних устройствах, используйте класс ** d-lg-block d-md-none d-sm-block ** Вы хотите показать все меню в больших и средних устройствах, ожидаемых в мобильных устройствах. используйте как class = "** d-lg-block d-md-block d-none d-sm-none **" Я положил его для div аналогично, вы даете классы элементу, который хотите скрыть только на маленьких экранах (Мобильные) или средние устройства (планшетные ПК)

<div class="col-sm-4 d-lg-block d-md-block d-none d-sm-none ">
  <h3>Column 1</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>

При нажатии кнопки вызывайте функцию и делайте так

function onBtnClick(){
var element = document.getElementById("Menu1");
element.classList.add("d-lg-block d-md-block d-none d-sm-none");
}

Answer 2

Пожалуйста, обновите ваш медиа-запрос

@media screen and (max-width: 991px) {

#shmenulinks {
  display: block;
}
.nav-link-collapse.not(this).removeClass('nav-link-show');
$(this).toggleClass('nav-link-show');
});

}

Answer 3

Пожалуйста, добавьте jquery.

$("#shmenulinks").click(function(){ $("#menulinks").slideToggle();});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>