0

我正在尝试创造一种相当独特的效果。其实没那么复杂，我想做的是建一个实验站点，我已经做了。我似乎无法弄清楚如何去做最后一步。

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

我想要做的是折叠其中包含文本的左侧栏：“Made in blah blah blah, etc.” 通过单击：“单击此隐藏此”。

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

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

这是隐藏选项 div id 的片段。我已经用尽了很多方法来尝试实现这种效果，但我似乎无法弄清楚。我已经尝试过 :onClick 类和 nth-child 类，但似乎没有任何效果。

4

3 回答 3

0

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

$("el").bind("onclick",function(){$("el").toggle('slow');});
于 2012-05-04T07:27:22.793 回答
0 
//  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;

});
于 2012-05-04T08:50:46.203 回答
0

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

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

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

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

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

于 2012-05-05T11:23:23.580 回答