0

非常に基本的な問題がありますが、解決策が見つかりませんでした。

テキストの大部分を小さな要約に折りたたむことができるようにしたい。テキストが折りたたまれている場合は、それを展開する「続きを読む」というボタンが表示され、テキストが展開されている場合、ボタンには「折りたたむ」というメッセージが表示されるはずです。

これを実現するために、次のJavascriptを使用しようとしました。JSbin HEREですが、機能していません。

マークアップ:

<div>Lore lipsumLore lipsumLore lipsumLore lipsumLore
    <br>lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore
    <br>lipsumLore lipsumLore lipsum
    <div id="rozwin">read more</div>
</div>
<p id="rozwijane">Lore lipsumLore lipsumLore lipsumLore lipsumLore
    <br>lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore
    <br>lipsumLore lipsumLore lipsum elektroniczną (Dz. U. Nr 144, poz. 1204 z późn. zm.).
    <div id="zwin">collapse</div>

JS:

$( "#zwin" ).click(function() {
    $( "#rozwijane" ).hide( "fast", function() {
        $( "#rozwin" ).show( 2000 );
        $( this ).prev().hide( "fast", arguments.callee );
    });
});

$("#rozwin" ).click(function() {
    $( "#rozwijanie" ).show( 2000 );
    $( "#zwin" ).hide( 2000 );
});
4

4 に答える 4

2

どうぞ ：

JSFiddle

jQuery :

$("#zwin").click(function () {
    $("#rozwijane").hide(2000);
    $('#zwin').hide(2000);
    $("#rozwin").show(2000);
});

$("#rozwin").click(function () {
    $("#rozwin").hide(2000);
    $("#rozwijane").show(2000);
    $("#zwin").show(2000);
});

CSS :

#rozwijane {
    display : none;
}

#zwin {
    display : none;
}

HTML :

<div>Lore lipsumLore lipsumLore lipsumLore lipsumLore
    <br />lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore
    <br />lipsumLore lipsumLore lipsum
</div>
<div id="rozwin">read more</div>
<p id="rozwijane">Lore lipsumLore lipsumLore lipsumLore lipsumLore
    <br />lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore
    <br />lipsumLore lipsumLore lipsum elektroniczną (Dz. U. Nr 144, poz. 1204 z późn.    zm.).</p>
<div id="zwin">collapse</div>
于 2013-09-18T14:44:50.087 に答える
0

これは、あなたが達成しようとしていると私が思うもので動作するJSBinです。他の何かを探している場合は、達成しようとしていることを詳しく説明してください。

作業例参照。あなたのコメント：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#zwin").click(function () {
                $("#rozwijane").hide("fast", function () {
                    $("#rozwin").show(2000);
                    $("#zwin").hide(2000);
                });
            });

            $("#rozwin").click(function () {
                $("#rozwijane").show(2000);
                $("#zwin").show(2000);
                $(this).hide(2000);
            });
        });
    </script>
    <title>Show/hide text</title>
</head>
<body>
    <div>
        Lorem ipsum dolor sit ...</div>
    <div id="rozwin">
        Read more</div>
    <p id="rozwijane" style="display: none;">
        Lore lipsumLore lipsumLore lipsumLore lipsumLore<br>
        lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore<br>
        lipsumLore lipsumLore lipsum elektroniczną (Dz. U. Nr 144, poz. 1204 z późn. zm.).</p>
        <div id="zwin" style="display: none;">
            collapse</div>
</body>
</html>
于 2013-09-18T14:29:03.380 に答える
0

マークアップを変更して、要約 (上部) 部分だけを配置し、「追加」テキストを別の要素に配置して、その「追加」テキストを切り替えます。表示テキストの「点滅」を回避し、きれいにします。簡単。現在のコンテンツをチェックする単純なロジックを使用して、「ボタン」テキストを切り替えます。

マークアップの変更:

<div id="rozwi">Lore lipsumLore lipsumLore lipsumLore lipsumLore
    <br />lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore</div>
<div id="rozwijane">
    <br>lipsumLore lipsumLore lipsum elektroniczną (Dz. U. Nr 144, poz. 1204 z późn. zm.).
    <p>Lore lipsumLore lipsumLore lipsumLore lipsumLore
        <br />lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore
        <br />lipsumLore lipsumLore lipsum elektroniczną (Dz. U. Nr 144, poz. 1204 z późn. zm.).</p>
</div>
<div id="zwin">show more</div>

簡略化されたコード:

$("#rozwijane").hide();// hide expanded text initially
$("#zwin").click(function () {
    var mytext="collapse";
    var currentText= $(this).text()
    $(this).text(currentText===mytext?"show more":mytext);
    $("#rozwijane").toggle("fast");
});

正常に動作する例: http://jsfiddle.net/emF5W/

于 2013-09-18T15:07:55.477 に答える
0

ここにフィドルのデモがあります

jsbin で、pタグが適切に閉じられていません。また、スクリプトではidはありrozwijanieますが、HTMLにはrozwijane

$("#zwin").click(function () {
    $("#rozwijane").hide();
    $("#zwin").hide();
    $('#rozwin').show();
});

$("#rozwin").click(function () {
    $('#rozwin').hide(2000);
    $("#rozwijane").show(2000);
    $("#zwin").show(2000);
});
于 2013-09-18T14:39:09.550 に答える