javascript - 同时使用 slideToggle 和 addClass

Question

我有一个服务标题列表，当您单击标题时，描述就会显示出来。我遇到了一个问题，我无法弄清楚最好的解决方案是什么。我想使用 jquery 的 slideToggle 方法使描述看起来好像在向下滑动或面板正在打开...想想视差外观。我还希望文本淡入，所以我使用了 transform:transition 方法和 opacity。

我的问题是这些方法一个接一个地运行，所以事件不会同时运行。我不确定如何使用纯 CSS 方法获得同样的效果。

有人有什么想法吗？

$(".service-list-wrap").on("click", function(event) {
		var $target = $(this).find('.service-list-description').toggleClass('active').slideToggle(700);
		$('.service-list-description').not($target).fadeOut(300).removeClass('active');
	});

.service-list-title {
  display: block;
  color: #333333;
  font-size: 1.1rem;
  letter-spacing: .1rem;
  margin: 20px 0px;
  padding: 0 10px 0 25px;
  cursor: pointer;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
}

.service-list-description {
  display: none;
  color: #333333;
  font-size: .9rem;
  margin: 10px 0;
	opacity: 0;
	transition: all .35s ease;-webkit-transition: all .35s ease;
}
.service-list-description.active {
	opacity: 1;
	transition: all .5s ease;-webkit-transition: all .5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service-list-wrap">
  <li class="service-list-title">A</li>
  <p class="service-list-description">This is the content for A</p>
</div>
<div class="service-list-wrap">
  <li class="service-list-title">B</li>
  <p class="service-list-description">This is the content for B</p>
</div>
<div class="service-list-wrap">
  <li class="service-list-title">C</li>
  <p class="service-list-description">This is the content for C</p>
</div>

Answer 1

此解决方案可能对您有所帮助 - https://jsfiddle.net/nxj6egfz/2/ .使用了 slideToggle 和 animate。

$(".service-list-title").on("click", function(event) {
    var $target = $(this).next('.service-list-description');
    $target.toggleClass('active', true).slideToggle(700).find('span').animate({opacity: 1}, 3000);
    $('.service-list-description').not($target).slideUp(700).find('span').css({opacity: 0}).removeClass('active');
});

// HTML
<div class="service-list-wrap">
  <li class="service-list-title">A</li>
  <p class="service-list-description"><span>This is the content for 
  A</span></p>
</div>
<div class="service-list-wrap">
  <li class="service-list-title">B</li>
  <p class="service-list-description"><span>This is the content for 
  B</span></p>
</div>
<div class="service-list-wrap">
  <li class="service-list-title">C</li>
  <p class="service-list-description"><span>This is the content for 
  C</span></p>
</div>

// CSS
.service-list-title {
  display: block;
  color: #333333;
  font-size: 1.1rem;
  letter-spacing: .1rem;
  margin: 20px 0px;
  padding: 0 10px 0 25px;
  cursor: pointer;
}

.service-list-description {
  display: none;
  color: #333333;
  font-size: .9rem;
 margin: 10px 0;

}
span{
  opacity: 0;
}