jquery - SlideToggle Jquery 恢复为原始文本

Question

我有这个 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 变量）更改为“单击以最小化”。这是我的 jQuery 代码：

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

}); 

});

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

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

Answer 1

根据示例请使用此

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/