因此,我有一个按钮显示并隐藏ID为“details”的div和ID为“more”的按钮,同时使用向上和向下箭头更改单击时的符号。 (它从隐藏的细节开始,下面的人字形可见。我真正想要的是在切换动画完成后而不是单击时图像交换(类更改)。 我该怎么做?
('#more').click(function() {
$('#details').toggle('slow');
});
$('#more').click(function()
{
if ($(this).html() == '<i class="icon-chevron-up"></i>')
{
$(this).html('<i class="icon-chevron-down"></i>');
}
else
{
$(this).html('<i class="icon-chevron-up"></i>');
}
});
答案 0 :(得分:2)
.toggle()有一个回调。使用它!
$('#more').click(function() {
var $el = $(this);
$('#details').toggle('slow', function() {
if ($el.html() == '<i class="icon-chevron-up"></i>') {
$el.html('<i class="icon-chevron-down"></i>');
}
else {
$el.html('<i class="icon-chevron-up"></i>');
}
});
});
答案 1 :(得分:2)
$('#more').click(function() {
var $i = $(this).find('i');
$('#details').toggle('slow' function(){
$i.toggleClass("icon-chevron-up icon-chevron-down");
});
});
答案 2 :(得分:0)
toggle方法接受一个函数作为第二个参数,在函数完成时将调用该函数。所以这应该可以解决问题:
('#more').click(function() {
var self = this; // you need the self reference in order to keep a reference to the clicked element
$('#details').toggle('slow', function ()
{
if ($(self).html() == '<i class="icon-chevron-up"></i>') {
$(self).html('<i class="icon-chevron-down"></i>');
}
else {
$(self).html('<i class="icon-chevron-up"></i>');
}
});
});