Question

试图让jQuery垂直手风琴与3个独立的面板A，B和C配合使用，每个面板的宽度为33.3％。我想要完成的是当你崩溃A，B＆amp; C将填补A折叠的新可用空间的其余33％。如果你关闭A＆amp; B然后C将填满100％的空白区域。任何帮助都非常感谢，因为我相信我可能会以完全错误的方式接近这个？

http://jsfiddle.net/Mvr3P/

HTML

<div id="toggle"><div id="toggle-button"></div></div>
<div id="toggle2"><div id="toggle-button2"></div></div>
<div id="toggle3"><div id="toggle-button3"></div></div>

CSS

#toggle {
    float: left;
    height: 200px;
    width:33.3%;
    background:red;
}

#toggle2 {
    float: left;
    height: 200px;
    width:33.3%;
    background:blue;
}

#toggle3 {
    float: left;
    height: 200px;
    width:33.3%;
    background:green;
}

#toggle-button {
    height: 20px;
    width: 100%;
    background:blue;
}

#toggle-button2 {
    height:20px;
    width: 100%;
    background: purple;
}

#toggle-button3 {
    height:20px;
    width: 100%;
    background:orange;
}

JQUERY

$(document).ready( function(){

    $('#toggle-button').click( function() {

        var toggleWidth = $("#toggle").width();

        if (toggleWidth = "33.3%") {
            toggleWidth ="100%";
        }

        else if (toggleWidth = "100%") {
          toggleWidth = "10px";
        }

        else {
          toggleWidth = "33.3%"
        }

        $('#toggle').animate({ width: toggleWidth });

  });

  $('#toggle-button2').click( function() {

    var toggleWidth = $("#toggle2").width();

    if (toggleWidth = "33.3%") {
        toggleWidth ="100%";
    }

    else if (toggleWidth = "100%") {
      toggleWidth = "10px";
    }

    else {
      toggleWidth = "33.3%"
    }

    $('#toggle2').animate({ width: toggleWidth });

});

$('#toggle-button3').click( function() {

    var toggleWidth = $("#toggle3").width();

    if (toggleWidth = "33.3%") {
        toggleWidth ="100%";
    }

    else if (toggleWidth = "100%") {
      toggleWidth = "10px";
    }

    else {
      toggleWidth = "33.3%"
    }

    $('#toggle3').animate({ width: toggleWidth });

    });
});

Answer 1

所以这里有一些棘手的事情 - 最大的挑战是如何一次制作多个动画。

解决方案的JSFiddle：http://jsfiddle.net/vYzpB/1/

首先，使用类来对元素进行通用标记将允许您编写更少的代码。这是一件非常重要的事情，特别是当您将相同的行为应用于多个元素时。您似乎知道，您应该只有一个ID，但是您可以拥有许多具有相同类名的元素。

<div class="accordion">
    <div id="toggle" class="toggle-item"><div id="toggle-button" class="toggle-button"></div></div>
    <div id="toggle2" class="toggle-item"><div id="toggle-button2" class="toggle-button"></div></div>
    <div id="toggle3" class="toggle-item expanded"><div id="toggle-button3" class="toggle-button"></div></div>
</div>

此外，将所有元素包装在父div（我称之为accordion）中。我很快就会解释原因。

通过该更改，我们可以将click事件应用于处理每个手风琴项目事件的.toggle-button类：

$(document).ready( function(){
    $('.toggle-button').click( function() {
        // capture the parent div with the class of 'toggle-item'
        var $parentToggle = $(this).parent('.toggle-item');

        // run this within setTimeout so that both animations
        // run at the same time. This is called "running asynchronously"
        window.setTimeout(function() {
            $('.toggle-item').not($parentToggle).animate({
                width: '10%'
            });
        }, 0);

        $parentToggle.animate({
            width: '80%'
        });

    });
});

window.setTimeout是这里的秘密。没有它，jQuery将等到第一个动画结束，然后继续下一个动画。通过将第一个动画包装在setTimeout中，我们基本上将其从顶部到底部的执行过程中删除，并将其称为异步。我们将此设置为＆＃34; 0＆＃34;因为我们实际上希望它立即运行（而不是等待一定的毫秒数）。

CSS

CSS具有＆＃34;默认状态＆＃34; .expanded类我们添加到用于占用2/3（或任何你想要的％）空间的元素。

另请注意新的父div如何设置宽度。没有它，元素将在转换时翻转。

.accordion {
    width: 600px;
    overflow: hidden;
}

.toggle-item {
    float: left;
    height: 200px;
    width: 10%;
}

.expanded {
    width: 80%;
}

#toggle {
    background:red;
}

#toggle2 {
    background:blue;
}

#toggle3 {
    background:green;
}

.toggle-button {
    height: 20px;
    width: 100%;  
}

#toggle-button {
    background:blue;
}

#toggle-button2 {
    background: purple;
}

#toggle-button3 {
    background:orange;
}

垂直jquery手风琴将填补兄弟姐妹崩溃时的空白百分比

1 个答案: