如何創建僅在從移動設備查看網站時才有效的手風琴盒？

Question

我正在開發一個網站，其中頁腳有四列鏈接，分為“關於”、“幫助”、“我的帳戶”和“法律”。

例如， Legal在桌面版上看起來像這樣：

---

合法的

• 常見問題
• 隱私政策
• 使用條款

---

但是，我希望類別僅在移動版本上是手風琴。 我設法制作了一個手風琴，但我不知道如何讓它在移動版本上工作，比如 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";
    }
  });
}

Answer 1

您可以將代碼用於移動和桌面版本，並使用 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 庫進行編程，並使用react-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>