jQuery 切换 div 和文本

Question

我想要一些有关此代码的帮助，我已经在 stackoverflow 上阅读了类似的问题和答案，但我仍然无法正确理解。

我有一个由 .html("") 填充的链接，用于阅读更多…

单击时，它会打开隐藏的 div，最后 .html("") 读取less...

当我单击关闭时，div 会滑动关闭，但文本仍然显示为 less...

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

//这是介绍 div

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

//下一个 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;
    });
});​

Answer 1

您只能将其设置为less..。您还需要评估它，如果当前值为 less...，则将其设置回 more...。

参见DEMO: Comparing HTML

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

编辑
freakish 在评论中提到比较 HTML 是不好的做法。
(还更新了示例以使用 OP 指定的文本和标签)

为此，请参阅替代方案 DEMO: Using Attributes

anchor 收到了新的自定义属性:

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

脚本已更新并进行了一些重构:

$(document).ready(function() {
    $(".overview-continued").hide();

    setState();

    $(".show-overview").click(function() {
        $(".overview-continued").slideToggle("1000");
        setState();
        return false;
    });

    function setState() {
        var control = $(".show-overview");
        var state = control.attr("data-item-state");

        control.html(state == "showLess" ? "more..." : "less...");
        control.attr("data-item-state", state == "showLess" ? "showMore" : "showLess");
    };
});​