jquery - 如何在 JQuery 中隐藏一个 div 并更改另一个 div 的大小？

Question

我希望能够单击特定链接，然后隐藏我的侧边栏<section>并调整内容大小<section>。目前我有隐藏机制工作，但我正在努力调整大小部分。

我的代码目前如下：

$(document).ready(function() {
        $('#sidebar-toggle-link').click(function() {
                $('#container-sidebar').toggle('slide');
        });
});

我尝试在第二个函数中添加它：

var toggle_width = $('#container-content').width() == 100 ? '74%' : '100%';
$('#container-content').animate({ width: toggle_width });

然而，这会将内容缩放<section>到 100%，但在第二次单击链接时不会再次返回 - 侧边栏重新出现，但内容<section>会转移到侧边栏下方，仍然是 100% 大小。

我如何在 JQuery 中做到这一点？

Answer 1

试试这个：

var toggle_width = $('#container-content').width() == $(window).width() ? '74%' : '100%';

窗口或任何 100% 宽度的父对象。

你也可以试试这个，这取决于你元素的样式（例如填充、边距）

$('#container-content').outerWidth() == ...