我如何创建一个手风琴盒子，只有在从手机上查看网站时才能工作

Question

我正在开发一个网站，其中页脚有四列链接，分为"关于"、"帮助"、"我的帐户"one_answers"法律"。

例如，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塌陷来处理塌陷。

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>