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

$("li.service-list-title").on("click", function(event) {
  var $target = $(this).siblings('.service-list-description').toggleClass('active');
});

.service-list-description {
 height:0px;
 opacity:0;
 transition: opacity .5s ease-in-out, height 0.1s;
}

.service-list-description.active {
 opacity:1;
 height: auto;
}

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

使用height：auto的示例小提琴：https://jsfiddle.net/beekvang/d1g2csqx/5/

Answer 2

所以，基本上，从语义的角度来看，你的html代码并不完全正确。你有一个“li”元素作为“div”元素的子元素。您应该将“ul”或“ol”元素作为“li”元素的父元素。

所以，我希望这个可行的解决方案可以帮到你。

https://jsfiddle.net/pablodarde/jkrchwnj/

<强> HTML

<ul class='list'>
  <li>
    <div class="box" id="A">
      <div class="title">A</div>
      <p>This is the content for A</p>
    </div>
  </li>
  <li>
    <div class="box" id="B">
      <div class="title">B</div>
      <p>This is the content for B</p>
    </div>
  </li>
  <li>
    <div class="box" id="C">
      <div class="title">C</div>
      <p>This is the content for C</p>
    </div>
  </li>
</ul>

<强> CSS

    ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style-type: none;
}

.box {
  max-height: 20px;
  border-bottom: 1px solid black;
  overflow: hidden;
  transition: all 0.5s;
}

.box p {
  opacity: 0;
  transition: all 0.8s;
}

.open {
  max-height: 100px;
}

.box .show {
  opacity: 1;
}

<强>的jQuery

    const list = document.getElementsByClassName('list')[0];



$('.list li').each(function(idx, li) {
  $(li).find('.title').on('click', function() {
    close($('.list'));
    $(this).parent().addClass('open');
    $(this).parent().find('p').addClass('show');
  });
});

function close(_list) {
  _list.each(function(idx, item) {
    $(item).find('.box').removeClass('open');
    $(item).parent().find('p').removeClass('show');
  });
}

Answer 3

此解决方案可能会对您有所帮助 - 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;
}

同时使用slideToggle和addClass

3 个答案: