Question

我今天玩了很长时间，试图在没有知识的情况下完成某些事情。但是我已经让JS小提琴这个解释，所以我希望有人可以帮助我。

让我们谈谈。

我有4个小盒子。每个方框都是15x15像素，就像这个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',
        });
    });
});

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

我有一些隐藏的内容，就像小提琴一样。实施例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;点击任何一个方框

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

The Fiddle

2 个答案: