jquery - 如何使高度上升(向上滑动)并使内容显示出来？

Question

我今天玩了很久，想在没有知识的情况下完成一些事情。但是我已经用 JS 弄乱了这个解释，所以我希望有人能帮助我。

让我们进入正题。

我有 4 个小盒子。每个盒子都是 15x15px 就像这个 Fiddle .

<div class="js-fiddleWrap">
    <div id="letterA">Letter A opened-content.</div>
    <div id="letterB">Letter B opened-content.</div>
    <div id="letterC">Letter C opened-content.</div>
    <div id="letterD">Letter D opened-content.</div>
    
    <nav class="collapseMenu">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </nav>
</div>​

点击一个盒子动画开始，盒子变高(变长)，变成 45px 而不是 15px。它也在上升，所以看起来它正在使用这个脚本上升。

$(document).ready(function() {
    var $collapseMenu = $('.collapseMenu li');

    $collapseMenu.on('click', function() {
        $(this).animate({
            'bottom': '30',
            'height': '45',
        });
    });
});​

虽然我做了这个，但我认为这是错误的。在这个动画之后，还有更多我无法完成的事情。

我有一些隐藏的内容，就像 fiddle 一样。示例 A、B、C 和 D 内容。因此，每个被单击的框都会上升，显示内容，然后如果单击了相同或不同的框，则隐藏内容。

此外，我无法创建最小化后退效果。意思是如果再次点击相同的框，一旦它上升并显示内容，它将回到默认位置。同样，如果单击不同的框，也会发生同样的事情。它将隐藏之前打开的框并将其最小化。

The Fiddle

Answer 1

试试这个 jsFiddle example

jQuery

var $collapseMenu = $('.collapseMenu li');
$collapseMenu.on('click', function() {
    $collapseMenu.stop(true,true).animate({
        'bottom': '0',
        'height': '15'
    });
    if($(this).height() != 45 ) $(this).stop(true,true).animate({
        'bottom': '30',
        'height': '45'
    });
});​