[英]Using a slideToggle and addClass at the same time
I have a service title list that when you click on the title the description shows. 我有一个服务标题列表,当您单击标题时,描述显示。 I am running into an issue that I cannot figure out what the best solution is.
我遇到了一个问题,我无法弄清楚最好的解决方案是什么。 I am wanting to use jquery's
slideToggle
method to make the description look as if it is sliding down or a panel is opening up...think parallax look. 我想使用jquery的
slideToggle
方法使描述看起来好像它正在向下滑动或面板正在打开...想想视差外观。 I am also wanting the text to fade in, so I used the transform:transition
approach with opacity
. 我也希望文本淡入,所以我使用了
transform:transition
方法和opacity
。
My issue is that the methods run one by one, so the events do not run simultaneously. 我的问题是方法逐个运行,因此事件不会同时运行。 I am unsure how I can get this same effect with a pure CSS approach.
我不确定如何使用纯CSS方法获得同样的效果。
Anyone have any ideas? 有人有想法么?
$(".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>
$("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>
An example using height:auto Fiddle: https://jsfiddle.net/beekvang/d1g2csqx/5/ 使用高度的示例:auto Fiddle: https ://jsfiddle.net/beekvang/d1g2csqx/5/
So, basically, your html code is not totally correct by the semantic point of view. 所以,基本上,从语义的角度来看,你的html代码并不完全正确。 You have a "li" element as a child of a "div" element.
你有一个“li”元素作为“div”元素的子元素。 You should have an "ul", or "ol" element as parent of your "li" elements.
您应该将“ul”或“ol”元素作为“li”元素的父元素。
So, I hope this possible solution can help you. 所以,我希望这个可能的解决方案可以帮到你。
https://jsfiddle.net/pablodarde/jkrchwnj/ https://jsfiddle.net/pablodarde/jkrchwnj/
html 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 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 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');
});
}
This solution may help you - https://jsfiddle.net/nxj6egfz/2/ . 这个解决方案可以帮到你 - https://jsfiddle.net/nxj6egfz/2/ 。 slideToggle and animate are used.
使用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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.