Question

我有下面的代码显示/隐藏div，同时根据是否显示div来更改文本：

$('#more').click(function() {
    $('#extra').slideToggle('fast');
    $('#more').text(function(_,txt) {
        return txt == 'More about us' ? 'Less about us' : 'More about us';
    });
    return false;
});

在#more链接上，我有一个向下的箭头（对于“关于我们的更多信息”文本，当div被隐藏时）但是我想更改此箭头以指示div何时可见文字写着“少关于我们”。如何编辑上述代码才能执行此操作？

Answer 1

尝试

$('#more').click(function() {
    $('#extra').slideToggle('fast');
    $('#more').text(function(_,txt) {
        var ret='';

        if ( txt == 'More about us' ) {
           ret = 'Less about us';
           $(this).css('background','url(link/to/image1.png)');
        }else{
           ret = 'More about us';
           $(this).css('background','url(link/to/image2.png)');
        }
        return ret;
    });
    return false;
});

提供者

Toggle text when link is clicked

Answer 2

我认为你可以创建两个css类，然后只需设置正确的类：

$('#more').removeClass("arrowdown");
$('#more').addClass("arrowup");

反之亦然，取决于您刚设置的文字。

Answer 3

结束使用上一个问题更新的一些代码：

$('#more').click(function() {
    $('#extra').slideToggle('fast');
    $('#more').text(function(_,txt) {
        var ret='';

        if ( txt == 'More about us' ) {
           ret = 'Less about us';
           $(this).css('background','url(link/to/image1.png)');
        }else{
           ret = 'More about us';
           $(this).css('background','url(link/to/image2.png)');
        }
        return ret;
    });
    return false;
});

切换背景图像位置

3 个答案: