SlideToggle Jquery还原为原始文本

时间:2012-11-29 07:06:15

标签: jquery slidetoggle

我有这个HTML代码:

    <div id='codesnipdiv'>
       <a class='fadex' id='codesnipfrontend'>$code_sniptitle</a>
       <div id='boxx' class='clearfix'>
          <pre>$code_content</pre>
       </div>
    </div>

当用户点击上面的超链接时,它将触发slideToggle事件并显示

的内容
   <div id='boxx' class='clearfix'>

默认隐藏。

它还会将链接的锚文本从其原始的$ code_sniptitle(这是一个PHP变量)更改为“Click to minimize”。这是我的jQuery代码:

   jQuery( document ).ready( function( $ ) {
$('#codesnipdiv #codesnipfrontend').click(function() {  
    $(this).text('Click to minimize');
    $(this).next().slideToggle();

}); 

});

以上代码运行良好。但是,当用户单击链接以最小化slideToggle时,我想恢复其原始锚文本。我在这里使用建议:jQuery - slideToggle() and Toggle Text但它不起作用。

您对如何实现这一点有一些想法吗?非常感谢你。

1 个答案:

答案 0 :(得分:0)

根据示例请使用此

jQuery(document).ready(function($) {
    $('#codesnipdiv #codesnipfrontend').click(function(){  
        $("#boxx").animate({opacity: 1.0},200).slideToggle(500, function() {
            $('#codesnipdiv #codesnipfrontend')
               .text($(this).is(':visible') ? "<Hide>" : "<Show>");
        });
    });
});

相应地更改<Hide><Show>文字。

实施http://jsfiddle.net/UP6jY/