0

jsfiddle での結果は機能しない可能性がありますが、私のドキュメントでは機能します。

http://jsfiddle.net/hXzrA/

機能しているのは、テキストが非表示になっていることです。 Read More...をクリックすると、段落内のテキストがさらに表示されます。[続きを読む... ] をクリックすると、段落内のテキストが折りたたまれて通常の状態に戻ります。

私が理解しようとしてきたことは次のとおりです。

  1. Read More....リンクの上にマウスを置きます。青い色のハイライトのようなもので、マウスオーバーであることを人々に知らせます。

  2. テキストが表示されると、Read More...テキストが消え、表示されたテキストの下部にCollapse text...が表示されます(マウスオーバーで同じ青いハイライト)。Collapse は、テキストを折りたたみ状態に戻す必要があります。これを達成するにはどうすればよいですか:

    $(document).ready(function(){

  var open = false;
  $('.reveal').click(function() {
    if (open) {
      $(this).animate({height:'20px'}); 
    }
    else {
      $(this).animate({height:'100%'});
    }
    open = !open;
  });
});

  3. また、表示/非表示時にテキストを内破/爆発させることができれば、それも素晴らしいことです。私は何度も何度も試みましたが、それを行うことができませんでした。

4

4 に答える 4

1

高さを操作するよりも、最初に要素の元の高さを計算する必要がありanimateます。100%

ここではjsFiddleが動作しています。

var orgHeight = parseInt($('.reveal').css('height'));
$('.reveal').css('height','20px');

$('.reveal').click(function() {
    var target = parseInt($(this).css('height'));

    if (target != orgHeight) {
        $(this).animate({'height':orgHeight+'px'},500);
    }else{
        $(this).animate({'height':'20px'},500); 
    }
});
于 2013-01-30T00:40:01.273 に答える
1

このフィドルでどのように単純化できるか見てみましょう: http://jsfiddle.net/syEM3/

Javascript:

$('.reveal').click(function() {
    $(this).next().slideToggle();
});

編集：公開/崩壊の効果について：

$('.reveal').click(function() {
    $(this).slideUp(100).next().slideToggle();
    $(".collapse").slideDown(100);
});

$('.collapse').click(function() {
    $(this).slideUp(100).prev().slideToggle();
    $(".reveal").slideDown(100);
});
于 2013-01-30T00:43:20.530 に答える
0

ホバー効果については、CSS を使用してください:

.readmore:hover, .readless:hover {
   text-shadow: 2px 2px 3px blue;
}

個別のリンクについては、マークアップに入れるだけの方が簡単だと思います。

<a class="readmore">Click Here to READ MORE...</a>
TEXT TEXT TEXT
<a class="readless">Collapse Text...</a>

次に、 // に基づいて適切に.show/ .hide .readmore/します。.readlessopen

http://jsfiddle.net/ExplosionPIlls/hXzrA/4/

于 2013-01-30T00:39:53.227 に答える
0

セレクターに :hover を貼り付けてから、ホバーのルールを設定します。これは、jquery 関数ではなく、css にある必要があります。

「続きを読む」テキストをクラスでスパンをラップし、jquery で、上記のクリック関数で次のようなことができます: $('spanClass').hide();

正反対: $('spanClass').show();

于 2013-01-30T00:40:14.030 に答える