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 >

现在，一切都很好。菜单功能正常，当您单击“+/-”时，它会垂直变小，或垂直变大。但是，我希望菜单通过deafult显示“ - ”（因为默认情况下菜单很大）。然后当你单击 - 符号并且它变小时，我希望有一个“+”。 fadein / fade out转换也很棒。

任何帮助都将深表感谢！：）

Answer 1

鉴于您使用animate()直接更改尺寸，只需将text()方法链接在animate()之后并明确定义：

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

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

JS Fiddle demo

Plus / Minus Toggle而不是Text

1 个答案: