我正在尝试扩展ul
的最大高度。当max-height属性更改时(通过切换类,高度会立即更改,但是ul
下面的元素会按照应有的方式考虑动画高度。
var expander = $('.skill-expand');
var skillsUl = $('.skills-list');
expander.on('click', function() {
skillsUl.toggleClass('unexpanded');
if (skillsUl.hasClass('unexpanded')) {
expander.html('<span class="fa fa-chevron-down">..\/..</span>');
} else {
expander.html('<span class="fa fa-chevron-up">../\..</span>');
}
return false;
});
.skills-list {
margin: 0;
padding: 0;
transition: max-height 1s ease-in-out;
max-height: 800px;
/*effectively auto*/
}
.skill-expand {
margin: auto;
text-align: center;
display: block;
}
.skills-list.unexpanded {
max-height: 60px;
overflow: hidden;
transition: max-height 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="skills-list unexpanded">
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
</ul>
<a href="#" class="skill-expand"><span class="fa fa-chevron-up">..\/..</span></a>
https://jsfiddle.net/ubgmshzo/
单击
..\/..
扩展器文本时,请注意扩展器元素向下移动之间的滞后。是否有一个原因? 最佳答案
使用jQuery UI toggleClass
您可以指定duration
,并使用promise
触发向上/向下V形箭头的切换。
var expander = $('.skill-expand');
var skillsUl = $('.skills-list');
expander.on('click', function() {
skillsUl.toggleClass('unexpanded', 1000).promise().done(function() {
if (skillsUl.hasClass('unexpanded')) {
expander.find('span').removeClass('fa-chevron-down');
expander.find('span').addClass('fa-chevron-up');
} else {
expander.find('span').removeClass('fa-chevron-up');
expander.find('span').addClass('fa-chevron-down');
}
});
return false;
});
.skills-list {
margin: 0;
padding: 0;
max-height: 800px;
/*effectively auto*/
}
.skill-expand {
margin: auto;
text-align: center;
display: block;
}
.skills-list.unexpanded {
max-height: 60px;
overflow: hidden;
}
.fa-chevron-up:before {
content: "..\\/..";
}
.fa-chevron-down:before {
content: "../\\..";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<ul class="skills-list unexpanded">
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
<li class="skill-rating">Developers developers</li>
</ul>
<a href="#" class="skill-expand"><span class="fa fa-chevron-up"></span></a>
我还将
span
fa-chevron-up
和fa-chevron-down
移到了CSS中,以便更轻松地切换而不是覆盖HTML。关于jquery - 动画最大高度,其他元素滞后,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44045027/