如何使高度上升（向上滑动）并使内容显示出来？

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>​

点击一个盒子动画开始，盒子变得更高（更长）并获得 45 像素而不是 15 像素。它也上升了，所以看起来它使用这个脚本正在上升。

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

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

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

我有一些隐藏的内容，就像在小提琴中一样。示例 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'
    });
});​

Answer 2

一个简单的解决方案是使用 .toggle

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

    $collapseMenu.toggle(
//odd clicks
    function(){
        $(this).animate({
            'bottom': '30',
            'height': '45',
        });
    },
//even clicks
    function(){
        $(this).animate({
            'bottom': '0',
            'height': '15',
        });
    });

});​

现在您可以为其添加额外的逻辑来检查是否有任何其他框被切换，或者简单地将所有其他框设置为底部：0；身高：15；单击任何框