0

после как нажал на любой span надо чтобы при нажатий на другой любой span предыдущий закрывался, а этот открывался.

$( document ).ready(function() {
  $("#first_menu").next().slideToggle(500);
});

$("span").click(function() {
  $(this).next().slideToggle(500);
});

1 ответ 1

0

$(".parrent").click(function() {
  if ($(this).hasClass('active') == false) {
    $(".parrent").removeClass('active').children().slideUp(500); //если где то открыто закрываем
    $(this).addClass('active').children().slideDown(500); //всегда открываем у того, на который нажали
  } else {
    $(this).removeClass('active').children().slideUp(500)
  }
});
span.parrent {
  display: inline-block;
  width: 19%;
  vertical-align: top;
  min-height: 20px;
  background: #8BC34A;
}
span.child {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="first_menu">
  <span class='parrent'>
  <span class="child">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit aliquet eros, eu consectetur arcu pellentesque quis. Ut semper tincidunt imperdiet.
    </span>
  </span>
  <span class='parrent'>
  <span class="child">
  Duis gravida et nunc a condimentum. Praesent risus dui, condimentum vel tortor nec, fermentum interdum felis. Pellentesque volutpat pellentesque mi eu lacinia. Mauris maximus pharetra est at ullamcorper. Nulla tempor facilisis vulputate. Fusce et fringilla massa. Aenean aliquam, lacus quis iaculis eleifend, ex arcu lobortis nunc, non sodales ligula sem ut turpis. Ut volutpat, tortor ut auctor viverra, orci justo rhoncus arcu, vitae dapibus dolor
    </span>
  </span>
  <span class='parrent'>
  <span class="child">
  n eros interdum rutrum. Sed id pretium sem, ac accumsan arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae velit nec lectus accu
    </span>
  </span>
  <span class='parrent'>
  <span class="child">
  et dictum dictum, arcu nibh semper mi, id dignissim mauris eros id justo. Vivamus pellentesque, risus et tempor faucibus, erat nulla rutrum risus, 
    </span>
  </span>
  <span class='parrent'>
  <span class="child">
   Nulla tempor facilisis vulputate. Fusce et fringilla massa. Aenean aliquam, lacus quis iaculis eleifend, ex arcu lobortis nunc, non sodales ligula sem ut turpis. Ut volutpat, tortor ut auctor viverra, orci justo rho
    </span>
  </span>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.