jquery - jQuery 切换 div 和文本

Answer 1

您只是将其设置为less... 您还需要评估它并将其设置回more...如果当前值为less....

参见演示：比较 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 指定的文本和标签）

为此，请参阅替代演示：使用属性

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

Answer 2

您需要在 click 函数中添加条件，因为您总是将 .show-overview 设置为“less...”

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

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

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

    });

Answer 3

您需要div从 JavaScript 的角度知道何时打开/关闭。尝试这个：

$(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);
    });
});

检查这个jsFiddle代码。请注意，我稍微重构了您的代码。

Answer 4

你在点击功能中告诉它用“.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);
});​

编辑：由于评论