jquery - 加/减切换而不是文本

Question

过去几天我一直在开发菜单。它将用作可扩展/可折叠（甚至是一个词吗？）菜单。现在我默认菜单垂直变大，然后当你点击“+/-”按钮时，尺寸垂直减小。您再次单击它，然后它会垂直变大..等等。

这是 JQuery 部分：

$(window).load(function() {
    $('.gh-gallink').toggle(function() {
        $('.gallery_container').animate({
            marginTop: "-60px",
            paddingTop: "75px",
            paddingBottom: "0px",
            height: "36px"
        }, 1000)
    }, function() {
        $('.gallery_container').animate({
            marginTop: "0px",
            paddingTop: "40px",
            paddingBottom: "0px",
            height: "100px"
        }, 1000);
    });
});

这是切换按钮的 html：

< p class = "gallerylink" >
< a href="#" class="gh-gallink" title="Expand / Collapse Menu" >
    + / -
< /a >
< /p >

所以现在，一切都很好。菜单功能正常，当您单击“+/-”时，它要么垂直变小，要么垂直变大。但是，我希望菜单默认显示“-”（因为默认情况下菜单很大）。然后当您单击 - 符号并且它变小时，我希望有一个“+”。淡入/淡出过渡也很棒。

任何帮助将不胜感激！:)

Answer 1

假设您通过animate()简单地将text()方法链接到animate()并明确定义来直接更改大小：

/* ...the animate stuff to make smaller...*/});
$(this).text('+');

/* ...the animate stuff to make larger...*/});
$(this).text('-');

JS 小提琴演示。