0

Всем привет! Почему работает нормально только последний элемент? А именно стрелки при сворачивании и разворачивании скрытого текста?

Вот пример:

$(function(){
		$a = $('.services-2__hided').hide();
		$a = $('.services-2__text-link')
		$a.on('click', function(event) {
			event.preventDefault();
			$a.not(this).next().slideUp(500);
			$(this).next().slideToggle(500);
			if($(".services-2__text-link").hasClass("arrowUp")){
				$(this).removeClass("arrowUp");
				$(this).addClass("arrowDown");
			}
			else{
					$(this).removeClass("arrowDown");
					$(this).addClass("arrowUp");
			}
	});
});
.services-2__text-link {
  display: block;
  border: 1px solid grey;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  padding-left: 60px;
  position: relative;
  cursor: pointer;
}

.services__link-icon {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 19px;
  left: calc(30px - 15px);
}

.services-2__hided {
  overflow-y: scroll !important;
  height: 154px;
  border: 1px solid grey;
  border-top: 0;
  padding: 20px;
  margin-bottom: 10px;
  text-align: left;
}

.arrowUp .services__arrow_up, .arrowDown .services__arrow_down {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: calc(50% - 15px);
  right: 2%;
  transition: all .5s ease;
}
.arrowUp .services__arrow_up:before, .arrowUp .services__arrow_up:after, .arrowDown .services__arrow_down:before, .arrowDown .services__arrow_down:after {
  content: '';
  position: absolute;
  width: 18px;
  height: 2px;
  background-color: grey;
  border-radius: 20px;
}

.arrowUp .services__arrow_up::before {
  transform: rotate(45deg);
  top: 40%;
  left: 0;
}
.arrowUp .services__arrow_up::after {
  transform: rotate(-45deg);
  top: 40%;
  right: 0;
}

.arrowDown .services__arrow_down::before {
  transform: rotate(45deg);
  top: 40%;
  right: 0;
}
.arrowDown .services__arrow_down::after {
  transform: rotate(-45deg);
  top: 40%;
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="services-2__hide-text"><a class="services-2__text-link arrowUp" href="#"><span class="services__arrow_up"></span><span class="services__arrow_down"></span>
                  <svg class="services__link-icon">
                    <use xlink:href="#s2_pic"></use>
                  </svg>
                  <h3 class="services-2__content-title">Photography</h3>
                  <div class="services__arrows"></div></a>
                <div class="services-2__hided disabled">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum corrupti sunt eaque accusantium expedita, labore asperiores quaerat magnam rerum, sint fugit aperiam mollitia, odit, explicabo corporis deleniti voluptate numquam atque possimus sequi ab reprehenderit. Veniam magnam minus cumque, quaerat rem deserunt ipsam rerum? Eos porro delectus cumque est cum fugiat, deleniti perspiciatis, laborum incidunt officiis nostrum atque accusamus iure magni, magnam cupiditate neque sapiente vel amet impedit sed. Qui aliquam eaque optio quo tempore nulla vel distinctio nobis, ad quaerat voluptatem impedit quod earum, ea inventore necessitatibus! Hic odit voluptate laborum expedita praesentium vero, quis odio voluptas facilis, architecto, sapiente!</div>
              </div>
<div class="services-2__hide-text"><a class="services-2__text-link arrowUp" href="#"><span class="services__arrow_up"></span><span class="services__arrow_down"></span>
                  <svg class="services__link-icon">
                    <use xlink:href="#s2_pic"></use>
                  </svg>
                  <h3 class="services-2__content-title">Photography</h3>
                  <div class="services__arrows"></div></a>
                <div class="services-2__hided disabled">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum corrupti sunt eaque accusantium expedita, labore asperiores quaerat magnam rerum, sint fugit aperiam mollitia, odit, explicabo corporis deleniti voluptate numquam atque possimus sequi ab reprehenderit. Veniam magnam minus cumque, quaerat rem deserunt ipsam rerum? Eos porro delectus cumque est cum fugiat, deleniti perspiciatis, laborum incidunt officiis nostrum atque accusamus iure magni, magnam cupiditate neque sapiente vel amet impedit sed. Qui aliquam eaque optio quo tempore nulla vel distinctio nobis, ad quaerat voluptatem impedit quod earum, ea inventore necessitatibus! Hic odit voluptate laborum expedita praesentium vero, quis odio voluptas facilis, architecto, sapiente!</div>
              </div>
<div class="services-2__hide-text"><a class="services-2__text-link arrowUp" href="#"><span class="services__arrow_up"></span><span class="services__arrow_down"></span>
                  <svg class="services__link-icon">
                    <use xlink:href="#s2_pic"></use>
                  </svg>
                  <h3 class="services-2__content-title">Photography</h3>
                  <div class="services__arrows"></div></a>
                <div class="services-2__hided disabled">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum corrupti sunt eaque accusantium expedita, labore asperiores quaerat magnam rerum, sint fugit aperiam mollitia, odit, explicabo corporis deleniti voluptate numquam atque possimus sequi ab reprehenderit. Veniam magnam minus cumque, quaerat rem deserunt ipsam rerum? Eos porro delectus cumque est cum fugiat, deleniti perspiciatis, laborum incidunt officiis nostrum atque accusamus iure magni, magnam cupiditate neque sapiente vel amet impedit sed. Qui aliquam eaque optio quo tempore nulla vel distinctio nobis, ad quaerat voluptatem impedit quod earum, ea inventore necessitatibus! Hic odit voluptate laborum expedita praesentium vero, quis odio voluptas facilis, architecto, sapiente!</div>
              </div>

1 ответ 1

0

Ваше условие: if($(".services-2__text-link").hasClass("arrowUp")) до клика по последнему элементу будет вовращать true, так как вы проверяете весь класс services-2__text-link. Проверяйте конкретный элемент на наличие класса arrowUp (в коде this вместо services-2__text-link):

if($(this).hasClass("arrowUp"))
2
  • Благодарю. А то с js на вы.
    – Shamil
    26 апр 2017 в 12:36
  • @Shamil это даже не js, а фреймворк. Почитайте документацию по настоящему js, чтобы вопросов связанных с базой не задавать.
    – MaximPro
    6 авг 2017 в 21:03

Ваш ответ

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

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