0

かなりユニークな効果を作成しようとしています。実際にはそれほど複雑ではありません。私がやろうとしているのは実験的なサイトを構築することです。これは既に行っています。最後のステップを実行する方法がわかりません。

だから、これは私がいじくり回している私のサイトですhttp://www.dig.ital.me/sandbox/about-me/

そして、私がやろうとしているのは、「Made in blah blah blah など」というテキストが含まれている左側のバーを折りたたむことです。「これをクリックして非表示にします」をクリックします。

そして、名前リンクに関連付けられたアンカーリンクを実行し、そのリンクがクリックされたときに display:none を呼び出してみました。しかし、それは機能していません。それで、スタックオーバーフローを試して、この種の効果を達成する方法について考えてみました。

#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

CSS3のみが必要な場合（IE6-8を気にしない場合）、次のことを試すことができます：http: //jsbin.com/isunoz/6/edit

私はそれを可能な限りコメントしました、私はそれが役立つことを願っています:)

私が行ったことは、チェックボックス入力を使用して、サイドバーを表示するかどうかを決定することです。

チェックボックス入力要素をサイドバー要素（div.fixedfooter）の直前に配置し、アンカー（矢印）をそのチェックボックスのラベルに変更することで、：checked疑似クラスと+セレクターを使用して兄弟をターゲットにすることができます要素（この場合、サイドバーdiv.fixedfooter）。チェックボックスがオンの場合、サイドバーは画面の外に移動し、チェックボックスがオフの場合、サイドバーが表示されます（左：0）。

アニメーションには、いくつかのcss3トランジションを使用しました（トランジション：左.4sイーズ）:)

于 2012-05-05T11:23:23.580 に答える
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 に答える