0

だから私はポートフォリオのウェブサイトを持っています。クリック可能な6つの正方形。クリックして下にスライドするアイテムの下にサイトが必要で、コンテンツを下にスライドすることによって作成されるスペースに、このポートフォリオ アイテムの詳細を表示する必要があります。

以下のリンクに記載されている効果が欲しいです。しかし、これは1つのアイテムに対してのみ機能します。I've got 6. アイテム 1 をクリックすると、コンテンツが下にスライドして詳細が表示されます。私が欲しいのは、アイテム 2 をクリックすると、アイテム 1 の詳細がスライドして戻り、アイテム 2 の詳細がスライドダウンすることです。

div を下にスライドさせてからコンテンツを .fadeIn() にスライドさせる方法とその逆の方法は?

例: http://www.applove.se このサイトのポートフォリオまでスクロールダウンし、アイテムをクリックして、私が達成したいことを確認してください。

これは私のhtmlです。この上に UL がありますが、それをコピーすると、なぜか全体がめちゃくちゃになります。

            <li class="port_list">
                <div id="port_img1"> intro_img1 </div>
            </li>

            <li class="port_list">
                <div id="port_img2"> intro_img2 </div>
            </li>   

            <li class="port_list">
                <div id="port_img3"> intro_img3 </div>
            </li>       

    </ul>

    <ul id="wrapper_portfolio">
            <li class="port_list">
                <div id="port_img4"> intro_img4 </div>
            </li>

            <li class="port_list">
                <div id="port_img5"> intro_img5 </div>
            </li>   

            <li class="port_list">
                <div id="port_img6"> intro_img6 </div>
            </li>       

    </ul>

CSS は、最初の 3 つの li が水平に表示されるようにします。最後の 3 つは、最初の 3 つの下にも水平に表示されます。私は画像を扱っていませんが、すべての div の背景画像を扱っています。

編集：

マイクは、私の html と css をいじるように私に頼みました。ぞーここです。http://jsfiddle.net/StillD/bDMxs/

ピンクのボックスは私のポートフォリオ アイテムです。その下に、クリックしたポートフォリオ アイテムの詳細情報 (ブラウザ全体の幅) を表示したいと思います。したがって、ポートフォリオ アイテム 1 をクリックすると、その下にある 3 つのアイテム (水平に表示) が下にスライドして、ポートフォリオ アイテム 1 の詳細用のスペースができます。アイテム 2 をクリックすると、アイテム 1 の詳細が消えて、詳細用のスペースが作られます。アイテム 2 など。

（詳細は今のところ鳥の写真で表されています）。

4

1 に答える 1

1

私はあなたが何を望んでいるのか理解していると思います。これは非常に単純な jsfiddle の例です。

http://jsfiddle.net/yRcnz/1/

基本的に、ユーザーがクリックする場所を確保するために、各 ul の前に何らかの要素が必要になります。ユーザーが操作する領域ができたら、いくつかの単純な JavaScript で ul 要素の表示を toggle() できます。

$('.expandable-ul li').click(function() {
    $(this).children('img').toggle();
});

$('.expandable-ul img').toggle();
于 2013-06-07T19:14:22.483 に答える