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

我今天玩了很长时间，试图在没有知识的情况下完成一些事情。 不过，我对这个解释做了些手脚，所以我希望有人能帮助我

让我们开门见山吧

我有4个小盒子。每个盒子是15x15px，就像这个一样

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

我有一些隐藏的内容，就像小提琴一样。示例A、B、C和D内容。 因此，单击的每个框都会上升，显示内容，然后在单击相同或不同的框时隐藏内容

另外，我也无法创建最小化的背部效果。这意味着，如果同一个框再次被点击，一旦它上升并显示内容，它将返回到默认位置。同样，如果单击不同的框，也会发生同样的事情。它将隐藏以前打开的框并将其最小化

试试这个

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'
    });
});​

---

一个简单的解决方案是使用.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；点击任何一个框

这都非常棒，尽管我不能完全理解它。然而，在这种情况下，只剩下一个麻烦。我会尽力解决最后的麻烦。干杯为无限欢呼。我也试过这个例子。工作原理与j08691中的示例完全相同。

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'
    });
});​

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

});​