Блог

Главная - Вопросы по программированию - Как закрыть открытый раздел меню accordion?

Как закрыть открытый раздел меню accordion?

#javascript #jquery #html #css #accordion

#javascript #jquery #HTML #css #аккордеон

Вопрос:

Я пытаюсь создать аккордеон, но я не знаю, как закрыть открытый. Как вы можете видеть, accordion работает нормально, пока вы не попытаетесь закрыть текущее представление.

Как я могу это сделать?

Примечание: аккордеон можно увидеть только в мобильной точке останова.

 $(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>

Ответ №1:

Перед удалением всех активных классов попробуйте сохранить текущее активное состояние выбранного элемента.

Например:

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

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