javascript - 显示更多按钮，点击后隐藏

Question

我有一个很好的脚本，单击按钮后会显示更多内容。该按钮点击后需要隐藏。

这是我到目前为止所拥有的:

 $(function() {
        $(".btn-down").next().hide().append('<a href="javascript:void();" class="btn-up">Show less</a>');

        $(".btn-down").click(function() {
            $(this).next().slideToggle();
        });

        $(".btn-up").click(function() {
            $(this).parent().slideUp();
        });
    });

我的 JSFiddle； https://jsfiddle.net/w5n7zkwu/5/

另一种方法是单击后更改按钮文本并将其放在隐藏文本下方。

我已经接近了，但不知道如何解决这个问题..

Answer 1

在此处的 .next() 之前添加 .hide()

$(".btn-down").click(function() {
        $(this).hide().next().slideToggle();
     });

在此处使用 $(".btn-down").show(); 再次显示“显示更多”按钮

$(".btn-up").click(function() {
    $(this).parent().slideUp();
    $(".btn-down").show();
});