我如何创建仅在通过移动设备查看网站时才能使用的手风琴盒？

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>