jQuery切换div和text

我想在这段代码上得到一些帮助，我已经在stackoverflow上阅读了类似的问题和答案，但我仍然无法正确理解

我有一个用.html（“”）填充的链接来阅读

更多…

单击会打开隐藏的div，最后.html（“”）显示

less…

当我单击close时，div幻灯片关闭，但文本仍然显示

less…

我读过很多关于如何做到这一点的文章，但我感到困惑，无法克服最后的障碍，任何帮助都将不胜感激

//这是介绍部

<div id="" class="">
    <p>
        Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim
        integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue
        wisi enim nunc ultricies sit, magna tincidunt. Maecenas aliquam maecenas
        ligula nostra, accumsan taciti.
   </p> 
</div>

悬舌苔无前叶，暂时性斜纹夜蛾
整型前庭前庭。Nisl rhoncus turpis est，vel elit，康格
威斯·埃尼姆·努克·尤里西斯·希特（wisi enim nunc ultricies sit），麦格纳·廷西登（magna tincidunt）。梅塞纳斯阿利奎姆·梅塞纳斯
鼻舌苔。

//下一个div被隐藏

<div class="overview-continued"> 
    <p>
        Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim
        integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue
        wisi enim nunc ultricies sit, magna tincidunt. Maecenas aliquam maecenas
        ligula nostra, accumsan taciti.
    </p>
</div>

<a class="show-overview" href="#"><h4></h4></a>

$(document).ready(function() {
    $(".overview-continued").hide();
    $(".show-overview").html("more...");
    $(".show-overview").click(function() {
        $(".overview-continued").slideToggle("1000");
        $(".show-overview").html("less...");
        return false;
    });
});​

悬舌苔无前叶，暂时性斜纹夜蛾
整型前庭前庭。Nisl rhoncus turpis est，vel elit，康格
威斯·埃尼姆·努克·尤里西斯·希特（wisi enim nunc ultricies sit），麦格纳·廷西登（magna tincidunt）。梅塞纳斯阿利奎姆·梅塞纳斯
鼻舌苔。

$（文档）.ready（函数（）{
$（“.overview continued”）.hide（）；
$（“.show overview”）.html（“更多…”）；
$（“.show overview”）。单击（函数（）{
美元（“.overview continued”）。幻灯片切换（“1000”）；
$（“.show overview”）.html（“更少…”）；
返回false；
});
});​

您只能将其设置为

更少..

。如果当前值小于…，则还需要对其进行求值并将其设置回

more…

看

编辑
评论中提到比较HTMLs是不好的做法。

freakish

。
（还更新了样本，以使用OP规定的文本和标签）

为此，请参见备选方案

锚点

收到一个新的自定义属性：

<a class="show-overview" data-item-state="showLess">...</a>​

---

您需要在单击函数中添加条件，因为您总是在设置。将概述显示为“更少…”

可能不是正确的语法，但：

$(".show-overview").click(function()

    {
        $(".overview-continued").slideToggle("1000");
        if($(".show-overview").html() == "less...")
        {
        $(".show-overview").html("more...");
        }
        else
        {
        $(".show-overview").html("less...");
        }
        return false;

    });

---

从JavaScript的角度来看，您需要知道何时打开/关闭

div

。试试这个：

$(document).ready(function() {
    var overview = $(".overview-continued");
    overview.hide();
    var show = $(".show-overview");
    show.html("more...");
    show.click(function(e) {
        e.preventDefault();
        var is_opened = overview.data('is_opened');
        if (!is_opened) {
            overview.slideDown(500, function() {
                show.html("less...");
            });
        } else {
            overview.slideUp(500, function() {
                show.html("more...");
            });
        }
        overview.data('is_opened', !is_opened);
    });
});

---

检查此代码。请注意，我对您的代码进行了一点重构。

您在单击函数中告诉它，要将其标记为“.less”。 如果你把它分成两种方法，它会更容易理解。。。 大致如下：

$(document).ready(function() {
    function close(){  
      $(".overview-continued").slideToggle("1000");
      $(".show-overview").html("more...");
    }
    function open(){  
      $(".overview-continued").slideToggle("1000");
      $(".show-overview").html("less...");
    }
    $(".overview-continued").hide();
    $(".show-overview").toggle(open,close);
});​

---

编辑：由于评论

您是否有可能在jsfiddle.net上提供问题的示例？如果没有

unbind

，每次单击多次“制作幻灯片切换”（以及html交换），这将添加处理程序。这确实有效，但要比较HTMLs吗？这是不好的做法。@freakish:谢谢你的评论。我用最简单的解决方案开始，我想OP可以重新考虑。但是，我添加了一个比较HTML的替代方法。这会让行动朝着正确的方向开始。OP需要记住的主要一点是，如果你想在状态或值之间切换，你需要每次评估并相应设置。谢谢你们，我非常感谢你们的帮助。@FrançoisWahl是的，当然。我只是认为，精确的答案还不够好——我们应该始终向人们传授良好的做法@关于那条评论，怪怪的+1。我同意。我通常会先尝试用一个有效的解决方案来回答问题，有时会回去重新考虑，以使用更好的方法。再次感谢你提到这一点，因为在课程之外传递良好的实践是很重要的。似乎有人因为某种原因一开始就否决了所有答案+1无论如何，这是一个有效的解决方案。谢谢freakish，这对我来说是非常好的代码，可以在JSFIDLE中完美地工作，但由于某些原因，它在xampp或我的live站点上对我不起作用。我将不得不看看是否有一些冲突，但它是一个开发中的小网站，所以没有太多的代码。PS我不能+1，因为我还不被允许，但当我可以的时候我会的。你接受一个答案会得到几分，我想这会让你达到要求的15分。@Jack如果你使用的是Chrome或FireFox，那么你可以在控制台（CTRL+SHIFT+J）中检查错误。IE的新版本也有控制台（F12？不确定）。然后您就会知道它为什么不工作（可能有冲突，或者您已经加载了非常旧的jQuery版本）我刚刚再次阅读了

jQuery.data（）

对象，认为您使用

data

对象非常好。看到这是

数据

对象的意图。引用自：

存储与指定元素关联的任意数据。

我刚刚提到过它。

$(document).ready(function() {
    var overview = $(".overview-continued");
    overview.hide();
    var show = $(".show-overview");
    show.html("more...");
    show.click(function(e) {
        e.preventDefault();
        var is_opened = overview.data('is_opened');
        if (!is_opened) {
            overview.slideDown(500, function() {
                show.html("less...");
            });
        } else {
            overview.slideUp(500, function() {
                show.html("more...");
            });
        }
        overview.data('is_opened', !is_opened);
    });
});

$(document).ready(function() {
    function close(){  
      $(".overview-continued").slideToggle("1000");
      $(".show-overview").html("more...");
    }
    function open(){  
      $(".overview-continued").slideToggle("1000");
      $(".show-overview").html("less...");
    }
    $(".overview-continued").hide();
    $(".show-overview").toggle(open,close);
});​