Jquery 使用切换按钮调整大小 Div

Question

我正在构建小型私人项目来学习 jquery，目前我遇到了困难。

目标是单击一个按钮，然后我的菜单和主要内容区域应该调整大小；当我再次点击时，它应该会自行调整大小以恢复正常。

第一部分有效，但第二部分“跳”了下来 - 我不知道为什么。

这是我的 JSFiddle：https://jsfiddle.net/ne1mb706/1/

HTML:

<div><button id="show_hide_button">click me</button></div>
<div id="some_box"></div>
<div id="some_other_box"></div>

CSS:

html, body {
    margin: 0;
    padding: 0;
}
#some_box {
    background: #fc0;
    width: 25%;
    height: 100px;
    float:left;
}
#some_other_box {
    background: #0cf;
    width: 75%;
    height: 100px;
    float:left;
}

JQuery 3.4.1:

var collapsed = false;
$('#show_hide_button').click(function() {
    if(!collapsed){
        $('#some_box').animate({width: '0%'});
        $('#some_other_box').animate({width: '100%'});
    } else {
        $('#some_box').animate({width: '25%'});
        $('#some_other_box').animate({width: '75%'});
    }
    collapsed = !collapsed;
});

感谢您的帮助:)

Answer 1

您必须从可见的部分开始才能正常工作：

var collapsed = false;
$('#show_hide_button').click(function() {
    if(!collapsed){
        $('#some_box').animate({width: '0%'});
        $('#some_other_box').animate({width: '100%'});
    } else {
        $('#some_other_box').animate({width: '75%'});
        $('#some_box').animate({width: '25%'});
        
    }
    collapsed = !collapsed;
});

Jquery 使用切换按钮调整大小 Div

Jquery Resize Div with Toggle Button

javascript

jquery

toggle