0

私はこの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ですが、機能しません。

これを達成する方法についていくつかのアイデアはありますか？どうもありがとう。

4

1 に答える 1

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/

于 2012-11-29T07:16:40.803 に答える