Question

我做了一个非常简单的水平全宽手风琴，但我遇到了一个错误 - 它的最后一部分在倒塌过程中失效。

它可能来自关闭和开放，同时动画，但我无法找到我做错的事情：

$( document ).ready(function() {
    var qtySect = 3 - 1;
    var unselectedWidth = 40 / qtySect +"%";
    var selectedWidth = 60+"%";
    $("div ul li:first-child").addClass('selected');
    $("div ul li").not(':first-child').addClass('unselected');
    $(".unselected").css("width", unselectedWidth);
    $(".selected").css("width",selectedWidth);
    $("div ul li").click(function() {
        if ($(this).hasClass("unselected")){
             $(this).animate( { width: selectedWidth }, { queue: false, duration: 300, easing: "linear" } )
             $(".selected").animate( { width: unselectedWidth }, { queue: false, duration: 300, easing: "linear" } );
            $(".selected").addClass("unselected").removeClass("selected");
            $(this).addClass("selected").removeClass("unselected");
        }
    });
});

你知道为什么这样做吗？

Answer 1

问题在于你正在使用整个100％的身体画布只是

var unselectedWidth = 40 / qtySect +“％”; reduce to var unselectedWidth = 39 / qtySect +“％”;

否则你可以将60％的部分减少到59％因为html元素带来了一些填充，其他方式是用填充0设置html的所有元素（它不是好的）我宁愿第一个。 ..

$(function () {
  //Remove 1 element(selected), and find the width of the rest(unselected)
    var qtySect = 3 - 1;
    var unselectedWidth = 39 / qtySect +"%"; /// made a change 
    var selectedWidth = 60+"%";

        //set initial widths
    $("div ul li:first-child").addClass('selected');
    $("div ul li").not(':first-child').addClass('unselected');
    $(".unselected").css("width", unselectedWidth);
    $(".selected").css("width",selectedWidth);
        //click animate
    $("div ul li").click(function() {
        if ($(this).hasClass("unselected")){
             $(this).animate( { width: selectedWidth }, { queue: false, duration: 300, easing: "linear" } )
             $(".selected").animate( { width: unselectedWidth }, { queue: false, duration: 300, easing: "linear" } );
            $(".selected").addClass("unselected").removeClass("selected");
            $(this).addClass("selected").removeClass("unselected");
        }
    });
});

.wrapper ul {
    overflow:hidden;
    padding: 0;
    margin: 0;
}

.wrapper li {
    display: block;
    float:left;
    padding: 0;
    margin: 0;
}

.pane1 {
    background-color: red;
}

.pane2 {
    background-color: green;
}

.pane3 {
    background-color: blue;
}

.pane4 {
    background-color: yellow;
}

<div class="wrapper">
	    <ul>
	        <li class="pane1">Pane #1</li>
	        <li class="pane2">Pane #2</li>
	        <li class="pane3">Pane #3</li>
	    </ul>
</div>

全宽手风琴

1 个答案: