Как предотвратить исчезновение моих логотипов, когда я переключаю свое меню, чтобы закрыть и изменить размер моего окна? - PullRequest
Новая
       0

Как предотвратить исчезновение моих логотипов, когда я переключаю свое меню, чтобы закрыть и изменить размер моего окна?

0 голосов
/ 07 марта 2020

У меня есть меню логотипов, которые можно будет нажимать. Они всегда отображаются, кроме как на небольших экранах, где их нужно переключать, чтобы показать с помощью меню гамбургера. Меню прекрасно переключается, когда оно находится на меньшем экране, но когда вы изменяете размер окна (если меню закрыто), все логотипы отображаются как «нет» и не переключаются назад. Я не уверен, что мне нужно настроить css или мой JS выключен. 

document.getElementById('menu').addEventListener('click', myFunction);

function myFunction() {
  let logo = document.getElementsByClassName("team");

  for (i = 0; i < logo.length; i++) {
    if (logo[i].style.display === 'none') {
      logo[i].style.display = 'inline';
    } else {
      logo[i].style.display = 'none';
    }
  }
}
.team {
  width: 55px;
  display: flex;
}

.menu-icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .mobile-container {
    margin: auto;
    height: fit-content;
  }
  .menu-icon {
    display: inline;
    width: 100%;
    background-color: red;
  }
  .team {
    display: none;
  }
}
<div class="wrapper">
  <div class="container mobile-container">
    <a href="#" class="menu-icon" id="menu">
      <img src="https://via.placeholder.com/55">
    </a>
    <div class="sidebar">
      <div class="column logos">
        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>
        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>
        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>
        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 07 марта 2020

Проблема в том, что когда вы нажимаете на кнопку меню, вы добавляете встроенные стили для всех пунктов меню, поэтому, когда вы скрываете их, у всех них есть display: none;, и они остаются такими же, независимо от размера экрана.

Вам нужно изменить свойства отображения пунктов меню только на мобильном телефоне. Вы можете достичь этого, используя класс, который влияет только на стили элементов на мобильном устройстве. См. Ниже класс .hide-mobile и код JS, который просто включает и выключает этот класс. 

document.getElementById('menu').addEventListener('click', myFunction);

function myFunction() {
  let logo = document.getElementsByClassName("team");

  for (i = 0; i < logo.length; i++) {
    logo[i].classList.toggle('hide-mobile');
  }
}
.team {
  width: 55px;
  display: flex;
}

.menu-icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .mobile-container {
    margin: auto;
    height: fit-content;
  }
  .menu-icon {
    display: inline;
    width: 100%;
    background-color: red;
  }
  .team {
    display: inline;
  }
  .team.hide-mobile {
    display: none;
  }
}
<div class="wrapper">
  <div class="container mobile-container">
    <a href="#" class="menu-icon" id="menu">
      <img src="https://via.placeholder.com/55">
    </a>
    <div class="sidebar">
      <div class="column logos">
        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>
        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>
        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>
        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>
      </div>
    </div>
  </div>
</div>

Надеюсь, что поможет.

...