0

フィドルの例 - http://jsfiddle.net/S6CwT/

CSS

#service_container {
    display: none;
}

HTML

<a href="/services/update/8" id="view_service">View Service Record</a>

<div id="service_container">
    Test
</div>

jQuery

jQuery.noConflict();

jQuery(function() {

    // toggle visibility of service section
    jQuery('#view_service').click(function() {
        jQuery('#service_container').slideToggle('slow');
        // toggle text
        if (jQuery('#service_container').is(':visible')) {
            jQuery('#view_service').text('Hide Service Record');
        } else {
            jQuery('#view_service').text('View Service Record');
        }
        return false
    });

});

バグは、リンクを初めてクリックしたときに、リンク テキストが正しく変更されて表示されます Hide Service Recordが、その後のクリックではテキストが変更されず、コンテナーが再び表示されたときにShow Service Record非 div表示に戻ります。Hide Service Record

私が見つけていないばかげた何かに違いありませんが、私が何を間違えたのかわかりません。

を使用して逆の方法で試しましたis(:hidden)が、同じように動作します。

4

5 に答える 5

1

以下のように、イベントの将来の変更に「on」イベントを使用してみてください

 jQuery('#view_service').on("click",function() {

             // your code..
}
于 2013-09-25T12:02:20.773 に答える
1

これを試して、ifステートメントで表示/非表示

   if (jQuery('#service_container').is(':visible')) {
       jQuery(this).text('View Service Record');
       jQuery('#service_container').hide('slow');
   } else {
       jQuery(this).text('Hide Service Record');
       jQuery('#service_container').show('slow');
   }

デモ

于 2013-09-25T12:03:12.453 に答える