Question

我想对这段代码有所帮助，我已经阅读了类似的问题＆amp;在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: 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"); }; });

Answer 2

您需要在点击功能中添加条件，因为您始终将.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

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

检查此jsFiddle代码。请注意，我稍微重构了一下你的代码。

Answer 4

你在点击功能中告诉它，用＃34; .less＆＃34;标记它。如果你用两种方法拆分它会让它更容易理解...... 这些方面的东西：

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

编辑：由于评论

jQuery切换div和文本

4 个答案: