jQuery切换div和文本

Question

我想对这段代码提供一些帮助,我已经在stackoverflow上阅读了类似的问题和答案,但我仍然无法做到正确.

我有一个由.html("")填充的链接来阅读 more…

单击时打开隐藏的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...您还需要对其进行评估并将其设置回more...当前值less....

请参阅DEMO:比较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:使用属性

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