Javascript 单击后显示隐藏的更多按钮

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

这就是我目前的情况：

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

$（函数（）{
$（“.btn down”）.next（）.hide（）.append（“”）；
$（“.btn down”）。单击（函数（）{
$（this.next（）.slideToggle（）；
});
$（“.btn up”）。单击（函数（）{
$（this.parent（）.slideUp（）；
});
});

我的腰；

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

我很接近，但不知道如何解决此问题。

在.next（）之前添加.hide（）

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

使用$（“.btn down”）.show（）再次显示“显示更多”按钮这里

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

---

谢谢，当按钮再次显示时，它的外观并不完美，但它可以工作：）为了好看，请从HTML中删除
，你很好。是的，我在我的网站上做了。当我点击show less按钮时，它看起来有点古怪，因为show more按钮在没有动画的情况下显示。你可以在show（）中添加一个以毫秒为单位的持续时间参数来创建动画，比如

$（“.btn down”）.show（800）

以在800毫秒内显示按钮。