0

私はjqueryに精通していないので、助けていただければ幸いです。コンテンツの一部を表示し、多かれ少なかれ表示できるコードがあります(どこからか覚えていません)。

コードでやりたいことはまさに今のことですが、単に表示/非表示にするのではなく、上下にスライドさせて多かれ少なかれコンテンツを表示させたいのです。

コード全体

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show more less</title>

<style media="screen" type="text/css">
#mytext {width:260px;height:200px;overflow:hidden;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function() {
var adjustheight = 200;
$("#adjust").toggle(function() {
$('#mytext').css('height', 'auto').css('overflow', 'visible');
$(this).text("less");
}, function() {
$('#mytext').css('height', adjustheight).css('overflow', 'hidden');
$(this).text("more");
});
});
</script>

</head>

<body>

<div id="mytext">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque iaculis tincidunt tortor. Nulla turpis dui, gravida non,
varius quis, molestie sit amet, justo. Vestibulum sed elit.
Duis lobortis odio quis nisi. Praesent enim. Sed auctor commodo lectus.
In eget augue a nulla auctor interdum.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nulla enim turpis, commodo at, feugiat nec, dapibus et, odio. Cras enim risus, sagittis eget,
ultrices quis, eleifend vel, risus. Cras a felis eu urna ornare vulputate.
Pellentesque viverra, lacus vitae tincidunt accumsan, nisi metus feugiat felis,
sed placerat est dolor et eros. Duis cursus. Maecenas sollicitudin, lorem vitae
placerat eleifend, dui elit imperdiet tellus, at convallis sapien orci sed pede.</div>
<a href="#" id="adjust">more</a>

</body>
</html>

これをアニメーション化する方法で css の高さを変更することで現在制御されていますか? ありがとう

4

4 に答える 4

1

これが私が達成したかったことを達成するための素晴らしい方法です。1つのdivの上部に一定量のテキストを表示し、スライド効果を使用してテキストの残りの半分を表示および非表示にできるようにします。

http://sim.plified.com/2008/09/15/sliding-content-from-a-partial-height-with-jquery/

于 2009-08-08T18:33:30.843 に答える
1

マットの答えに便乗したようなものです。HTMLは次のとおりです。

<div id="alwaysShow">Here is an introduction to what I want to say.</div>
<a href="#" id="adjust">More...</a>
<div id="sometimesShow">Here is some more info.</div>

jQuery は次のようになります。

<script type="text/javascript">
    $(document).ready(function() {
        $("#adjust").toggle(function() {
            $("#sometimesShow").slideDown("fast");
            $(this).text("Less...");
        }, function () {
            $("#sometimesShow").slideUp("fast");
            $(this).text("More...");                
        });
    });
</script>
于 2009-08-06T16:54:38.420 に答える
1

slideToggleメソッドをご覧になりましたか?

// Open & Close myDiv.  Animation take 1 second (1000 ms)
$('#myDiv').slideToggle(1000);

編集：これがより良い答えです。

HTML には、常に表示したいもの用の div と、非表示のもの用の別の div があります。

<div id="alwaysShow">Here is an introduction to what I want to say.</div>
<a href="#" id="adjust">More...</a>
<div id="sometimesShow">Here is some more info that you don't always care about</div>

このようにして、ちょうど切り替えることができますsometimesShow。それはまさにあなたが求めたものではありませんが、私はそれがあなたの問題を解決すると思います.

于 2009-08-06T15:48:57.240 に答える
0

これは役立つ簡単なコードです..

Scriptタグ内のコードをコピーするだけです

 $(document).ready(function() {
            $('#buttontag').click(function(){
                //alert("Here I am ..");
                $('#mytext').slideToggle("fast");
            });
        });

これを body タグ内に追加します。

<button id="buttontag"> Slide it .. </button>

これは間違いなく機能します..しかし、jqueryファイルを含める必要があります..

http://code.jquery.com/jquery-1.9.1.min.js

于 2013-02-15T16:08:41.387 に答える