Question

我有一个非常基本的问题，但我找不到解决方案。

我希望能够将大量文本折叠成一个小摘要。当文本折叠时，应该有一个按钮，说“阅读更多”，它会扩展它，当文本被展开时，按钮应该说“崩溃”，你猜对了 - 折叠它。

我尝试使用以下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 );
});

Answer 1

你走了：

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>

Answer 2

Here是一个有效的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>

Answer 3

这是Fiddle DEMO

在您的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);
});

Answer 4

我会更改标记，只是将摘要（在顶部）部分放入，然后将“附加”文本放在另一个元素中并切换“附加”文本 - 避免某些“闪烁”的可见文本，以及让它变得非常简单。使用检查当前内容的简单逻辑切换“按钮”文本：

标记更改：

<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/

显示（）隐藏（）和删除按钮

4 个答案: