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 中，您没有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 回答
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，我认为您正在努力完成。如果您正在寻找其他东西，请详细说明您要完成的工作。

工作示例 cf。你的评论：

<!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 回答