Question

提前感谢您对此的任何帮助，我会尽力解释一下。

我有一个1000px宽和220px高的容器，在这里我将有三个高220px的列，但宽度不同（77px，200px和300px）。当您单击一个div时，它将打开一个固定的大小（每个都相同，比如400px），其他未单击的将缩小回原始大小（77px，200px和300px）。喜欢不同宽度的手风琴..

我的jquery到了那里但不完全，我知道如何在点击上创建一个事件，我知道从那里我需要收缩所有东西，但是我点击回到它们的原始尺寸。我完成了但是点击一下就扩展到了它需要的大小。

jsfiddle here!

    $(document).ready(function(){
 // Your code here
 $('.section').click(function() {
  $('.section').not(this).animate({width:"77px"},400);
  //alert('clicked!');
  $(this).animate({width:"400px"},400);
 });
});

<div id="pictureNavContainer">

 <div class="section pictureSectionOne" id="1"></div>
 <div class="section pictureSectionTwo" id="2"></div>
 <div class="section pictureSectionThree" id="3"></div>

</div>

<style>
#pictureNavContainer{background-color:#262626; width:1000px; height:220px; overflow:hidden;}
.pictureSectionOne{float:left; background:yellow; height:220px; width:77px;}
.pictureSectionTwo{float:left; background:red; height:220px; width:177px;}
.pictureSectionThree{float:left; background:blue; height:220px; width:400px;}
</style>

我想出了一种解决方案：

<script>
$(document).ready(function(){
    // Your code here
    $('.section').click(function() {



        $('#1').animate({width:"50px"},400);
        $('#2').animate({width:"100px"},400);
        $('#3').animate({width:"200px"},400);

        //alert('clicked!');
        $(this).animate({width:"400px"},400);
    });
});
</script>

但代码不是很好..但是它有效

此：

$(function(){

    var $sections = $('.section');
    var orgWidth = [];

    var animate = function() {
        var $this = $(this);
        $sections.not($this).each(function(){
            var $section = $(this),
                org = orgWidth[$section.index()];
            $section.animate({
                width: org
            }, 400);
        });
        $this.animate({
            width: 400
        }, 400);
    };

    $sections.each(function(){
        var $this = $(this);
        orgWidth.push($this.width());
        $this.click(animate);  
    });
});

Answer 1

好的，我想我得上班了。喜欢this？

但是，这不会将单击的元素设置为固定大小，而是设置为剩余的大小。如果您将单击的元素调整为固定大小，则三列将变得更宽或更薄，然后是1000px，这真的是您想要的吗？

Here是一个更新的示例。这完全符合您的要求，但我不确定这是您想要的。

内联评论代码：

$(function(){
    // we cache the result set from the selector so we can
    // reuse them without having to query the DOM again
    var $sections = $('.section');

    // placeholder array for original widths
    var orgWidth = [];

    // handler function to take care of the animations
    var animate = function() {
        var $this = $(this);
        // iterate through all but current element
        $sections.not($this).each(function(){
            // create jQuery object and fetch original width
            var $section = $(this),
                org = orgWidth[$section.index()];
            // animate current element
            $section.animate({
                width: org
            }, 400);
        });
        // animate current element
        $this.animate({
            width: 400
        }, 400);
    };

    // let's iterate through each of the elements
    $sections.each(function(){
        // create jQuery object for current element
        var $this = $(this);
        // push the elements width into the placeholder
        orgWidth.push($this.width());
        // bind the handler to the click event
        $this.click(animate);  
    });
});

Jquery。动画宽度问题

1 个答案: