jQuery用显示和隐藏替换链接文本

时间:2015-03-11 12:18:35

标签: jquery toggle show-hide

我试图改变一些“显示更多”'将文字链接到“显示更少”'一旦关联的内容被揭示,使用jQuery。

我有created a jsfiddle来说明我到目前为止所做的工作。当我点击“显示更少”时,我还需要关闭内容。链接。

jQuery(function(){
    jQuery('.reveal_more').click(function(){
        jQuery('.box').hide();
        jQuery('#item-'+jQuery(this).attr('target')).show();
    });
});

我想知道是否有人可以帮助我? :)

1 个答案:

答案 0 :(得分:1)

您可以使用.text(function)设置主播元素的文字,并根据其文字值,使用.toggle( boolean)显示/隐藏目标

代码

jQuery('.reveal_more').click(function(){
    jQuery('.box').hide();

    //Switch text              
    $(this).text(function(_, val){
        return val == "Show More" ? "Show Less" : "Show More"
    });

    //Toogle target element        
    jQuery('#item-'+jQuery(this).attr('target')).toggle($(this).text() == "Show Less");

});

DEMO