jquery - 展开/折叠 div 的切换按钮

Question

我有两个彼此相邻的 div，想使用切换功能水平折叠一个 div(侧边栏)，同时展开另一个 div( map )以占据前者的完整宽度。然后我需要切换来将两个 div 恢复到原来的宽度/位置。我可以让它执行第一个操作，但我不知道如何执行相反的操作。请参阅Fiddle :

    $(document).ready(function(){
        $("#toggle").click(function(){
            $("#sidebar").animate({width: 'toggle'});
            $("#map").animate({width: '100%'});     
        });
    });

Answer 1

试试这个

HTML

<input type="button" data-name="show" value="Toggle" id="toggle">

脚本

$(document).ready(function () {
            $("#toggle").click(function () {
                if ($(this).data('name') == 'show') {
                    $("#sidebar").animate({
                        width: '0%'
                    }).hide()
                    $("#map").animate({
                        width: '100%'
                    });
                    $(this).data('name', 'hide')
                } else {
                    $("#sidebar").animate({
                        width: '19%'
                    }).show()
                    $("#map").animate({
                        width: '80%'
                    });
                    $(this).data('name', 'show')
                }
            });
        });

DEMO