Как создать гармошку, которая работает, только если сайт просматривается с мобильного телефона? - PullRequest
Новая
       7

Как создать гармошку, которая работает, только если сайт просматривается с мобильного телефона?

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

Я занимаюсь разработкой сайта, в котором нижний колонтитул содержит четыре столбца ссылок, разделенных на «О нас», «Справка», «Моя учетная запись» и «Правовая информация».

Например, Правовая информация будет выглядеть следующим образом в настольной версии:

LEGAL

  • FAQs
  • Политика конфиденциальности
  • Условия использования

Однако я хочу, чтобы категории были аккордеонами только в мобильной версии . Мне удалось сделать аккордеон, но я не знаю, как заставить его работать, только когда он находится на мобильной версии, например, нижний колонтитул на веб-сайте lululemon.

HTML для аккордеона до сих пор: 

<button class="collapse-header">Leal</button>
  <div class="footer-menu-collapse">
    <a href="#">FAQs</a>
    <a href="#">Terms of Use</a>
    <a href="#">Privacy Policy</a>
  </div>

CSS для аккордеона до сих пор: 

button.collapse-header {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 16px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.2em;

  width: 100%;
  background-color: $white;
  border: none;
  outline: none;
  cursor: pointer;
}


.footer-menu-collapse {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

JavaScript, который я до сих пор кодировал: 

var acc = document.getElementsByClassName("collapse-header");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

1 Ответ

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

Вы можете поместить оба кода для мобильной и настольной версии и использовать CSS медиазапросы (@media only screen and (max-width: 600px)), чтобы показывать только мобильный код на маленьких экранах и показывать код рабочего стола на больших экранах. Например: 

<!-- mobile code --> 
<button class="collapse-header">Leal</button>
<div class="footer-menu-collapse">
    <a href="#">FAQs</a>
    <a href="#">Terms of Use</a>
    <a href="#">Privacy Policy</a>
</div>

<!-- desktop code --> 
<ul class='bigScreen'>
   <dl><a href="#">FAQs</a></dl>
   <dl><a href="#">Terms of Use</a></dl>
   <dl><a href="#">Privacy Policy</a></dl>
</ul>

И CSS: 

/* don't show mobile code on big screens */
.collapse-header, .footer-menu-collapse{
     display: none;
}

/* only apply css for smaller than 600px screens */
@media only screen and (max-width: 600px){
    .bigScreen{
         display: none;
     }
     .collapse-header, .footer-menu-collapse{
         display: block;
     }
}

Второй метод:

Вы можете решить проблему с помощью JS , Например, сайт lululemon запрограммирован библиотекой React и использует response-collapse для обработки коллапса.

JSX: 

<div class="footer-menu__collapse col-xs-12 col-md-3">
  <ul class="footer-menu__list collapse-wrapper">
    <li class="footer-menu__item">
      <h4 class="collapse-header">
        <a class="footer-menu__link" href="#">My Account</a>
        {/* 
           This is the arrow down icon that handles collapsing
           and only will be shown under 992px,
           By clicking it, isOpened state will be updated to opposite state.
        */}
        <span
          onClick={() => this.setState({ isOpened: !this.state.isOpened })}
          class="collapse-toggle"
        >
          <svg>...</svg>
        </span>
      </h4>
      {/*
         Collapse is open always when width > 992px,
         otherwise is depend on isOpened state
      */}
      <Collapse isOpened={window.innerWidth < 992 ? this.state.isOpened : true}>
        <ul class="footer-menu__list collapse-detail">
          <li>Sign In</li>
          <li>Register</li>
          <li>Order Status</li>
          <li>Returns</li>
        </ul>
      </Collapse>
    </li>
  </ul>
</div>
...