如何关闭手风琴菜单的打开部分？

Question

I'm trying to create an accordion, but I don't know how to close the open one. As you can see, the accordion works fine until you try to close the current view.

How can I do that?

Note: The accordion can only be seen on mobile breakpoint.

 $(function() { $('.footer-links-holder').click(function() { if ($('.footer-links-holder').hasClass('active')) { $('.footer-links-holder').removeClass('active') } $(this).toggleClass('active') }); }); 

 /* HTML Set up */ footer { background: #191919; color: #fff; margin: 0; @import 'https://fonts.googleapis.com/css?family=Open+Sans'; font-family: "Open Sans", sans-serif; padding-top: 20px; } footer .centered { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; } footer .centered .footer-contact { width: 20%; } footer .centered .footer-navigation { width: 60%; } footer .centered .footer-navigation .footer-links-holder { border-left: 1px solid rgba(255, 255, 255, 0.5); width: 33.33333%; position: relative; float: left; margin: 0; padding-left: 10px; } footer .centered .footer-navigation .footer-links-holder>div { position: relative; top: -20px; } footer .centered .footer-navigation .footer-links-holder .footer-links { margin: 0; padding: 0; list-style: none; /*-webkit-transition: max-height 0.5s; transition: max-height 0.5s;*/ } footer .img-bar { position: relative; text-align: center; margin: 20px 0; } footer .img-bar div { display: inline-block; } footer .img-bar div img { height: 40px; padding: 10px; margin: 0 10px; } footer .bottom-bar { position: relative; text-align: center; font-size: 10px; background: #000; padding: 15px 0; } /* Responsive Tablet Sizes */ @media only screen and (max-width: 749px) { footer .centered { flex-wrap: wrap; } footer .centered .footer-logo { max-width: 250px; width: 50%; } footer .centered .footer-contact { width: 50%; padding: 0 20px; } footer .centered .footer-navigation { width: 100%; } footer .centered .footer-navigation .footer-links-holder { padding: 0 20px; } } /* Responsive Mobile Sizes */ @media only screen and (max-width: 500px) { footer .centered .footer-logo { width: 100%; margin: 0 auto; } footer .centered .footer-contact { width: 100%; } footer .centered .footer-navigation .footer-links-holder { width: 100%; padding: 0; } footer .centered .footer-navigation .footer-links-holder h3 { margin: 0; padding: 10px 20px; border-top: #000 1px solid; cursor: pointer; /* Down Arrows */ } footer .centered .footer-navigation .footer-links-holder h3::after { float: right; margin-right: 10px; content: ""; display: inline-block; vertical-align: middle; margin-top: 7px; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: transform 0.5s; transition: transform 0.5s; } footer .centered .footer-navigation .footer-links-holder .footer-links { max-height: 0; overflow: hidden; padding: 0 20px; } footer .centered .footer-navigation .footer-links-holder.active h3::after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } footer .centered .footer-navigation .footer-links-holder.active .footer-links { max-height: 10000px; } } /* Social Icons */ .social h3 { padding-bottom: 10px; } .social a { display: inline-block; padding: 7px; width: 35px; height: 35px; margin: 0 2px; background: #fff; border-radius: 50%; vertical-align: middle; } .social a:hover { background: #65c2ed; } .social a.linkedin { padding: 4px; } .social a svg .face, .social a svg .twit, .social a svg .link { fill: #000; } /* Typography */ footer h3 { font-weight: lighter; margin-bottom: 0; } footer p, footer li { font-weight: 400; letter-spacing: 0.05em; margin: 10px 0; } footer a { color: rgba(255, 255, 255, 0.5); font-size: 10px; text-decoration: none; -webkit-transition: color 0.5s, background 0.5s; transition: color 0.5s, background 0.5s; } footer a:hover { color: #65c2ed; } /* Misc CSS */ .clearfix:before, .clearfix:after { content: " "; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; clear: both; } body { margin: 0; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /*# sourceMappingURL=styles.css.map */ 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <footer> <div class="centered clearfix"> <div class="footer-navigation"> <div class="footer-links-holder"> <div> <h3>Section 1</h3> <ul class="footer-links"> <li><a href="">Page Title 1</a></li> <li><a href="">Page Title 2</a></li> <li><a href="">Page Title 3</a></li> <li><a href="">Page Title 4</a></li> </ul> </div> </div> <div class="footer-links-holder"> <div> <h3>Section 2</h3> <ul class="footer-links"> <li><a href="">Page Title 1</a></li> <li><a href="">Page Title 2</a></li> <li><a href="">Page Title 3</a></li> <li><a href="">Page Title 4</a></li> </ul> </div> </div> <div class="footer-links-holder"> <div> <h3>Section 3</h3> <ul class="footer-links"> <li><a href="">Page Title 1</a></li> <li><a href="">Page Title 2</a></li> <li><a href="">Page Title 3</a></li> <li><a href="">Page Title 4</a></li> </ul> </div> </div> </div> <div class="footer-contact"> <div class="social"> <h3>Contact</h3> <a href="https://www.facebook.com/" class="facebook"> <svg viewBox="0 0 33 33"><g><path d="M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z"></path></g></svg> </a> <a href="https://twitter.com/" class="twitter"> <svg viewBox="0 0 33 33"><g><path d="M 32,6.076c-1.177,0.522-2.443,0.875-3.771,1.034c 1.355-0.813, 2.396-2.099, 2.887-3.632 c-1.269,0.752-2.674,1.299-4.169,1.593c-1.198-1.276-2.904-2.073-4.792-2.073c-3.626,0-6.565,2.939-6.565,6.565 c0,0.515, 0.058,1.016, 0.17,1.496c-5.456-0.274-10.294-2.888-13.532-6.86c-0.565,0.97-0.889,2.097-0.889,3.301 c0,2.278, 1.159,4.287, 2.921,5.465c-1.076-0.034-2.088-0.329-2.974-0.821c-0.001,0.027-0.001,0.055-0.001,0.083 c0,3.181, 2.263,5.834, 5.266,6.438c-0.551,0.15-1.131,0.23-1.73,0.23c-0.423,0-0.834-0.041-1.235-0.118 c 0.836,2.608, 3.26,4.506, 6.133,4.559c-2.247,1.761-5.078,2.81-8.154,2.81c-0.53,0-1.052-0.031-1.566-0.092 c 2.905,1.863, 6.356,2.95, 10.064,2.95c 12.076,0, 18.679-10.004, 18.679-18.68c0-0.285-0.006-0.568-0.019-0.849 C 30.007,8.548, 31.12,7.392, 32,6.076z"></path></g></svg> </a> <a href="https://www.linkedin.com/" class="linkedin"> <svg viewBox="0 0 512 512"><g><path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"></path></g></svg> </a> </div> </div> </div> <div class="bottom-bar"> <a href="">All Rights Reserved © 2016</a> | <a href="">Privacy Policy</a> | <a href="">Terms of Service</a> </div> </footer> 

Answer 1

Try to store the current active state of the clicked element before removing all active classes.

For example:

$(function() {
  $('.footer-links-holder').click(function() {
    const thisIsActive = $(this).hasClass('active');
    $('.footer-links-holder.active').removeClass('active');

    if (!thisIsActive) {
      $(this).toggleClass('active');
    }
  });
});