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变量）更改为“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但它不起作用。

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

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/

SlideToggle Jquery还原为原始文本

1 个答案: