切换按钮以展开/折叠 div答案

【问题标题】：Toggle button to expand/collapse divs切换按钮以展开/折叠 div
【发布时间】：2014-08-03 16:40:10
【问题描述】：

我有两个相邻的 div，我想使用切换功能水平折叠一个 div（侧边栏），同时展开另一个（地图）以占据前者的全宽。然后我需要切换来将两个 div 恢复到原来的宽度/位置。我可以让它做第一次操作，但我不知道如何做相反的事情。见Fiddle：

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

【问题讨论】：

标签： jquery css toggle collapse expand

【解决方案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

【讨论】：

您的代码运行良好，幻灯片效果最好。这正是我一直在寻找的。谢谢！
@user3716388 谢谢 :-)
我只想指出这不能正常工作。当动画开始时（返回时），您可以看到侧边栏在地图下方可见。

【解决方案2】：

你只需要检查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

【讨论】：

同样在这个上，侧边栏被推到地图下。不是最好的解决方案。
@Ruddy 侧边栏何时何地被推到地图下？你在哪个浏览器上测试？
使用 Chrome（最新版），您只需在点击切换按钮时查看滚动条即可看到这一点。你会看到它会变大，然后恢复正常。与 IE 相同，尽管您使用的是 jQuery 1.10.1，但 IE 似乎不喜欢它并且根本无法工作。
这段代码实际上适用于我正在处理的内容。
@user3716388 是的，我还是没听懂 Ruddy 在说什么。

【解决方案3】：

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

小提琴编辑：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 属性，这样它就不会在折叠时出现在地图下方。在我的示例中，我在动画结束后完全隐藏了侧边栏。

【讨论】：

侧边栏只是被推到地图下......这不起作用。
@Ruddy 也许你只需要调整宽度
@Mir 这是你的答案，你应该修复它。
@Ruddy 我认为我们应该主要指出方向并帮助其他用户理解概念，而不是让他们复制粘贴他们不理解的东西。我相信我的答案背后的理论是正确的，即使小提琴结果不是 100% 完美。我肯定会解决它，但我认为这在这一点上并不重要。
@Mir 更改宽度不会解决此问题。因此，您的答案并不正确。这个想法是解决 OP 的问题（假设他们已经提供了这样做的信息）并解释你如何解决问题，不仅是为了 OP，而且任何人将来可能会遇到类似问题。因为我觉得这是不正确的，所以我会对答案投反对票，但我确实给了你修正答案的机会。

【解决方案4】：

使用 jQuery toggleClass()

Working Demo

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

.fullWidth{
    width : 100% !important;
}

【讨论】：