Javascript Show（）隐藏（）和删除按钮_Javascript_Jquery_Html

Javascript Show（）隐藏（）和删除按钮

javascript jquery html

Javascript Show（）隐藏（）和删除按钮,javascript,jquery,html,Javascript,Jquery,Html,我有一个非常基本的问题，但我找不到解决办法我希望能够将一大块文本折叠成一个小摘要。当文本被折叠时，应该有一个按钮，上面写着“阅读更多”，它会将文本展开，当文本被展开时，按钮应该写着“折叠”，你猜到了，它会将文本折叠我尝试使用以下Javascript来实现这一点。JSbin，但它不起作用标记： <div>Lore lipsumLore lipsumLore lipsumLore lipsumLore <br>lipsumLore lipsumLore lips

我有一个非常基本的问题，但我找不到解决办法

我希望能够将一大块文本折叠成一个小摘要。当文本被折叠时，应该有一个按钮，上面写着“阅读更多”，它会将文本展开，当文本被展开时，按钮应该写着“折叠”，你猜到了，它会将文本折叠

我尝试使用以下Javascript来实现这一点。JSbin，但它不起作用

标记：

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

是一个工作的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>


$（文档）.ready（函数（）{
$（“#zwin”）。单击（函数（）{
$（“#rozwijane”）.hide（“fast”，函数（）{
美元("罗兹温")节目(2000),；
$（“#zwin”）.hide（2000年）；
});
});
$（“#rozwin”）。单击（函数（）{
$（#rozwijane”）.show（2000年）；
$（#zwin”）.show（2000年）；
$（本）.hide（2000年）；
});
});
显示/隐藏文本
同侧阴唇。。。
阅读更多

唇彩唇彩唇彩唇彩唇彩唇彩唇彩唇彩

lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore

Lipsumore Lipsumore Lipsumum elektroniczną（Dz.U.Nr 144，poz.1204 zón.zm.）
崩溃

这是一个

在jsbin中，您没有正确关闭

标记。此外，在您的脚本中，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);
});

给你：

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:

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>

Lore lipsumLore lipsumLore lipsumLore lipsumLore

lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore

lipsumLore lipsumLore lipsumum
阅读更多
lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore

lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore

Lipsumore Lipsumore lipsum elektroniczną（Dz.U.Nr 144，poz.1204 zón.zm.）
崩溃

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

标记更改：

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

工作指令中的示例：

请提供您的密码好吗？到目前为止你试过什么？做一个JsFiddle？在我的帖子里查一下。。这里有到jsbin.com的链接。你应该总是把你的代码放在你的帖子里。谢谢你，我是新来的，我没有足够的时间来阅读规则。请注意，在你的例子中，div

#zwin

在

rozwijane

中，正如你在问题中添加的jsbin标记格式所显示的那样谢谢，但第一个文本应该一直保留。

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

<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");
});