javascript - 如何通过缩小宽度隐藏固定位置的侧边菜单

Question

我的页面上有一个带有目录的侧边菜单。我希望它是可扩展/可折叠的。我已经有点工作了，唯一的问题是动画看起来不正确，因为当我缩小侧边菜单的宽度时，可以看到链接的文本也缩小了。我已经尝试了几个版本的溢出并设置最小宽度和切换。但结果总是要么这种尴尬的收缩，要么根本不隐藏它，它只是位于主容器 div 之外。

这是 fiddle : http://jsfiddle.net/DR2Y2/15/

除非全屏显示，否则您无法真正看到它的实际效果:http://jsfiddle.net/DR2Y2/15/embedded/result/

我认为我的 css 有问题，但也许可以编写更好的 jQuery 来达到预期的效果。我的 Jquery 看起来像这样:

$("#table-of-contents-link").click(function () {
        event.preventDefault();
        var $rightcolumn = $("#right-column");
        var $leftcolumn = $("#left-column");
        var $toc = $(".table-of-contents");
        if ($rightcolumn.width() == 1) {

            $rightcolumn.animate({
                width: "22%",
            }, 1500 );
            $leftcolumn.animate({
                width: "71%",
            }, 1500);
            //$toc.show();
        }else {
            $rightcolumn.animate({
                width: "1",
            }, 1500);
            $leftcolumn.animate({
                width: "95%",
            }, 1500);
            //$toc.hide();
        }

});

我基本上只是想让右列的元素缩小到主容器的边缘。除了笨拙的链接文本效果外，它几乎可以正常工作。

编辑 我已经更新了我的 fiddle 以显示更多我的意思。我将其包含在一个设置为 90% 宽度的容器中。我希望右栏内容消失在该容器的边缘，而不是屏幕边缘。

Answer 1

编辑 2 使用 jQuery 动画:http://jsfiddle.net/Varinder/embLD/7/

编辑再想一想，您不需要对 width 属性进行转换，transform 就可以很好地完成这项工作。

更新了 90% 内容区域的 fiddle :http://jsfiddle.net/Varinder/embLD/5/

---

您可以利用过渡，但不确定在 padding 和 width 属性上添加过渡是否是个好主意。

我稍微调整了标记以实现 float 效果。即当侧边栏缩小时 - 内容流动以填充剩余空间。

fiddle http://jsfiddle.net/Varinder/embLD/3/

HTML

<a href="#" id="table-of-contents-link">Toggle TOC</a>
<div id="main">
    <div class="content-wrapper">
        <div class="content">
            ..content..
        </div>
    </div>
    <div class="toc-wrapper">
        <div class="fixed table-of-contents" style="border-top: 1px solid #577ec5; width: inherit;">
            <h3>Lorem Ipsum</h3>
            <ul style="margin-left: 3px;">
                ..content..
            </ul>
        </div>
    </div>
</div>

CSS

#main {
   overflow:hidden; /*clearfix*/
}

.content-wrapper {
    float:left;
    width:100%;
}

.content {
    padding-right:220px; /* width of toc (200px) + gutter (20px) */
    transition:padding-right .3s ease;
}

.toc-wrapper {
    float:right;
    width:200px;
    margin-left:-200px;
    overflow:hidden;
    transition:width .3s ease;
}

.toc-wrapper a {
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.hide-toc .content {
    padding-right:0;
}

.hide-toc .toc-wrapper {
    width:0;
}

JS

var $page = $("#main");
var $tocLink = $("#table-of-contents-link");

$tocLink.on("click", function(e) {
    e.preventDefault();
    $page.toggleClass("hide-toc");
});