0

我今天玩了很长时间，试图在没有知识的情况下完成一些事情。但是我对这个解释做了一个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 的内容。因此，每个被点击的框都会升起，显示内容，然后如果点击了相同或不同的框，则隐藏内容。

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

小提琴

4

2 回答 2

1

试试这个jsFiddle 例子

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'
    });
});​
于 2012-10-03T20:14:46.473 回答
1

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

于 2012-10-03T20:24:59.963 回答