尝试隐藏对象/创建折叠效果

Question

我正在尝试创建一个相当独特的效果。这实际上并不复杂，我想做的是建立一个实验网站，我已经完成了。我似乎不知道如何进行最后一步。

所以这是我的网站，我正在修补 http://www.dig.ital.me/sandbox/about-me/

我想做的是折叠包含文本的左侧栏："在等等中制造。 通过点击："点击这个隐藏这个"。

我尝试做一个与名称链接关联的锚链接，并在单击该链接时调用显示：none。但是，它不起作用。所以我想我应该尝试堆栈溢出，看看我如何在它崩溃的地方实现这种效果，然后再次重新打开。

#hide-option { color:#FFF; width:500px; height:500px; padding-left:170px;}
#hide-option:hover .fixedfooter {
display:none;
cursor:pointer; }

下面是隐藏选项div id 的片段。我已经用尽了很多途径来尝试实现这种效果，但我似乎无法弄清楚。我已经尝试了 ：onClick 类和第 n 个子类，但似乎没有任何效果。

Answer 1

//  Store the footer as a variable, so we don't have to keep calling jQuery's selector engine
//  It's slower than a tortoise stuck in a traffic jam.
var target = $('.fixedfooter');
//  Every time the hide-option link is clicked
$('#hide-option a').click(function() {
    //  If the left position of the target is 0
    if(parseInt(target.css('left')) == 0) {
        //  Check the target is not animated and, if it is, animate off screen
        !target.is(':animated') && target.animate({left: -751}, 250);
    } else {
        //  Assume it's hidden, and put it back to the start
        !target.is(':animated') && target.animate({left: 0}, 250);
    }
    //  Stop the link being followed
    return false;
});

Answer 2

JQuery，JavaScript库，将为你解决这一切。

$("el").bind("onclick",function(){$("el").toggle('slow');});

Answer 3

如果你只想要CSS3(如果你不关心IE6-8(，你可以试试： http://jsbin.com/isunoz/6/edit

我已经尽可能多地评论了它，希望它对:)有所帮助

我所做的是使用复选框输入来决定是否应该显示侧边栏。

通过将复选框输入元素放在侧边栏元素 (div.fixedfooter( 之前并将锚点(箭头(更改为该复选框的标签，我能够使用 ：checked 伪类和 + 选择器来定位同级元素(在本例中为侧边栏 div.fixedfooter(。如果选中该复选框，边栏将移出屏幕，如果未选中，则会显示边栏(左：0(。

对于动画，我使用了一些css3过渡(过渡：左.4s缓和(:)