如何仅为移动设备创建手风琴菜单页脚

Question

如何创建在移动设备上折叠的页脚并且您必须单击菜单标题才能实际展开？

我希望页脚菜单在桌面上正常显示，如下所示：

和 2. 移动设备看起来像这样，基本上是自动折叠，用户可以选择展开或关闭菜单

谢谢 ！

我当前的代码：

 <div class="three columns" > <h2 > Legal </h2> <ul> <li> <a href="#">Shipping</a></li> <li> <a href="#" >Contact Us</a></li> <li> <a href="#">About</a></li> <li> <a href="#">Returns</a></li> </ul> </div> <div class="three columns" > <h2> Information </h2> <ul> <li> <a href="#">Privacy</a></li> <li> <a href="#" >Terms</a></li> <li> <a href="#">Ambassadors</a></li> <li> <a href="#">Blog</a></li> </ul> </div>

Answer 1

我希望这可以帮助你。

 jQuery(".nav-footer h4").click(function(){ jQuery(this).parent(".nav").toggleClass("open"); });

 .nav-footer-item ul { list-style: none; padding-left: 3px; }.open h4 { opacity: 0.3; } h4 { font-size: 30px; }.nav-footer-item { padding: 25px;important: } @media (max-width. 768px) {.nav-footer:nav h4 { cursor; pointer. }:nav-footer ul { max-height; 0: overflow;hidden: transition; max-height 1s ease-out. }.nav-footer:nav h4:after { content: url("data,image/svg+xml:%3Csvg xmlns='http.//www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 20 20'%3E%3Cpath d='M14,613,10c0.0.23-0,188.0.419-0,419.0.419H10.42v3,774c0.0.23-0,189.0.42-0,42.0.42s-0.419-0.189-0.419-0.42v-3.774H5.806c-0,23.0-0.419-0.189-0.419-0.419s0.189-0,419.0.419-0.419h3.775V5.806c0-0,23.0.189-0,419.0.419-0.419s0,42.0,189.0,42.0.419v3.775h3.774C14,425.9,581.14,613.9,77.14,613.10 M17,969,10c0.4.401-3,567.7.969-7,969.7.969c-4,402.0-7.969-3.567-7.969-7.969c0-4,402.3.567-7,969.7.969-7.969C14,401.2,031.17,969.5,598.17,969.10 M17,13.10c0-3.932-3.198-7.13-7.13-7.13S2,87.6,068.2,87,10c0.3,933.3,198.7,13.7,13.7.13S17,13.13,933.17,13;10'%3E%3C/path%3E%3C/svg%3E"): width; 25px: float; right. }.nav-footer.nav:open h4:after { content: url("data,image/svg+xml:%3Csvg xmlns='http.//www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 20 20'%3E%3Cpath d='M10,185.1.417c-4,741.0-8,583.3.842-8,583.8,583c0.4,74.3,842.8,582.8,583.8.582S18,768.14,74.18,768.10C18,768.5,259.14,926.1,417.10,185.1.417 M10,185.17.68c-4,235.0-7.679-3.445-7.679-7.68c0-4,235.3.444-7,679.7.679-7.679S17,864.5,765.17,864.10C17,864.14,234.14,42.17,68.10,185.17.68 M10,824.10l2.842-2.844c0.178-0,176.0.178-0,46.0-0.637c-0.177-0.178-0.461-0.178-0,637.0l-2,844.2.841L7,341.6.52c-0.176-0.178-0.46-0.178-0,637.0c-0,178.0.176-0,178.0,461,0.0.637L9,546.10l-2,841.2.844c-0,178.0.176-0,178.0,461,0.0.637c0,178.0,178.0,459.0,178.0,637.0l2.844-2.841l2,844.2.841c0,178.0,178.0,459.0,178.0,637.0c0.178-0,176.0.178-0,461.0-0.637L10,824;10z'%3E%3C/path%3E%3C/svg%3E"): width; 25px. }.nav-footer.nav:open ul { height;auto: max-height; 500px: transition; max-height 1s ease-in !important; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <footer class="nav-footer"> <div class="nav-footer-item nav col-sm-3"> <h4>Title</h4> <ul> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> <div class="nav-footer-item nav col-sm-3"> <h4>Title</h4> <ul> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> <div class="nav-footer-item nav col-sm-3"> <h4>Title</h4> <ul> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> <div class="nav-footer-item nav col-sm-3"> <h4>Title</h4> <ul> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </footer>

Answer 2

我建议您不要使用 JS 方法 go ，因为 CSS 有一个很好的替代方案，它可以为您提供相同的行为和逻辑。

看这个例子

https://www.w3schools.com/howto/howto_css_switch.asp