1

一部のコンテンツ (#hidden_​​content) をデフォルトで非表示にしたいページがあります。このページには、「コンテンツを表示」というテキスト例の CSS ボタンがあります。

このボタンをクリックすると、div #hidden_​​content がスライド効果で表示され、同時に「コンテンツを表示」ボタンのテキストが「コンテンツを非表示」の例に変わり、クリックするとコンテンツが再び非表示になります。

ボタン

<a href="" id="button" class="button_style">Show content</a>

分割

<div id="hidden_content">Content</div>

スライド スクリプト

$(document).ready(function(){
  $("#button").click(function(){
    $("#hidden_content").slideToggle("slow");
  });
});

ボタンのテキストが必要なので、クリックすると変更されます。それ、どうやったら出来るの？

ありがとう。

4

4 に答える 4

2

これを試してください：http://jsfiddle.net/dRpWv/1/

$(document).ready(function() {
  $("#button").toggle(function() {
    $(this).text('Hide Content');
  }, function() {
    $(this).text('show Content');
  }).click(function(){
      $("#hidden_content").slideToggle("slow");
  });
});
于 2013-01-02T17:11:19.097 に答える
0

slideToggle doc ページから: アニメーションが完了すると実行されるコールバックを追加できます。

$('#hidden_content').sliddeToggle('slow', function(){
  if( $('#hidden_content').is(':hidden') ){
    $('#button').text('Show content');
  } else {
    $('#button').text('Hide content');
  }
})
于 2013-01-02T17:12:12.530 に答える
0

w3schools によると、イベントメソッドtoggle()はバージョン 1.9 以降で削除されています。(注: これはイベント メソッドのtoggle() であり、エフェクト メソッドのtoggle() ではありません。エフェクト メソッドの toggle() は残ります。)

Jai の答えは素晴らしいので、彼の答えを使用しif、else代わりにand を使用して修正しましたtoggle()。

$(document).ready(function() {
    $(".button").click(function(){
        if($(this).text() == 'Show Content')
            $(this).text('Hide Content');
        else
            $(this).text('Show Content');
        $("#hidden_content").slideToggle("slow");
    });
});

JSFiddle Here で試してみてください。

于 2015-03-24T12:17:30.210 に答える