Question

我正在努力创造一种相当独特的效果。实际上并没有那么复杂，我要做的就是建立一个我已经做过的实验性网站。我似乎无法弄清楚如何做最后一步。

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

我正在尝试做的是折叠左侧的栏中有文字：“用等等等等等等”点击：“点击此按钮隐藏它”。

我已经尝试过与名称链接相关联的锚链接，并在单击该链接时调用display：none。但是，它不起作用。所以我想我会尝试使用stackoverflow，关于如何在崩溃时实现这种效果，并重新打开。

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

这是hide-option div id的片段。我已经用尽了很多尝试来实现这种效果的路线，但我似乎无法弄清楚如何解决这个问题。我尝试过：onClick类和nth-child类，但似乎没什么用。

Answer 1

JQuery，JavaScript库，将为您解决所有问题。

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

Answer 2

//  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 3

如果您只想要CSS3（如果您不关心IE6-8），可以尝试以下方法：http://jsbin.com/isunoz/6/edit

我尽可能地评论它，我希望它有所帮助：）

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

通过将复选框输入元素放在侧边栏元素（ div.fixedfooter ）之前并将锚点（箭头）更改为该复选框的标签，我可以使用：检查伪类和 + 选择器以定位兄弟元素（在本例中，侧栏 div.fixedfooter ）。如果选中该复选框，侧边栏将移出屏幕，如果未选中，则会显示侧边栏（ left：0 ）。

对于动画，我使用了一些css3过渡（过渡：左.4s轻松）：）

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

3 个答案: