Question

我有两个div彼此相邻，并希望使用toggle函数水平折叠一个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

Answer 2

我通常使用第二个css类来告诉div的当前状态。当div扩展时更改或删除collapsed之类的内容，因此您可以检查第二个类以确定用户请求的操作。

小提琴编辑：http://jsfiddle.net/8wKxY/6/

这样的事情：

$(document).ready(function(){
    $("#toggle").click(function(){
        if($(this).hasClass('expanded')){
            $("#sidebar").stop().animate({width: '19%'});
            $("#map").stop().animate({width: '80%'});
            $(this).removeClass('expanded');
        }
        else {
            $("#sidebar").stop().animate({width: '100%'});
            $("#map").stop().animate({width: '100%'});      
            $(this).addClass('expanded');
        }
    });
});

在示例中，我将控件类直接附加到按钮，但将它附加到两个可扩展div的公共容器更合适。

另请注意，您可能需要在侧边栏上添加owerflow: hidden属性，以便在折叠时不会在地图下方。在我的例子中，我在动画结束后完全隐藏了侧边栏。

Answer 3

您只需要检查div是100%还是80%。

$(document).ready(function () {
    $("#toggle").click(function () {
        $("#sidebar").animate({
            width: 'toggle'
        });
        var value = $("#map")[0].style.width !== "100%" ? '100%' : '80%';
        $("#map").animate({
            width: value
        });
    });
});

<强> Working Fiddle

Answer 4

使用jQuery toggleClass()

Working Demo

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

.fullWidth{
    width : 100% !important;
}

切换按钮以展开/折叠div

4 个答案: