0

私は自分のページでこれ（フォトショップ画像）をしたい：

ここに画像の説明を入力

(ACTORS リンクの上に)ホバーすると、黄色のドロップダウン リスト (Fotis J.Colakides などがある場所) がゆっくりと表示されます。上から下まで。

自分のページでこれを行う最善の方法がわかりません。

もちろん、次のように unorder list() を使用する必要があります。

    <ul id="showInfoNav">
        <li><a class="slideBtn" href="#">MEDIA</a>
            <ul class="slideShow">
                <li>assa</li>
            </ul>
        </li>
        <li><a class="slideBtn" href="#">ACTORS</a>
            <ul class="slideShow">
                <li><a href="#" onclick="javascript:getSummary(1)">ACTOR1</a></li>
                <li><a href="#" onclick="javascript:getSummary(2)">ACTOR2</a></li>
            </ul>
        </li>
    </ul>

[アップデート]

今まで私はこれをやった: ( http://jsfiddle.net/bMGhC/ )

ここに画像の説明を入力

しかし、私はcssからそれをやっています。私は左を持っています:-9999px; ホバーすると、 left:0px; を実行しています。

私はそれをしたいです。しかし、それは機能していません。

ここに私のCSSがあります:

ul#showInfoNav 
    {
        list-style:none;
        float:left;
        width:100%;
    }

    ul#showInfoNav li
    {
        float:left;
        margin-right:50px;
        position:relative;
    }

    ul#showInfoNav a.slideBtn
    {
        padding:5px;
        display:block;
        text-decoration:none; 
    }
    ul#showInfoNav ul a:hover{
        color:#898989;
    }
    /*--- DROPDOWN ---*/
    ul#showInfoNav ul
    {
        background-color:#F4F9B6;
        padding:50px 10px 10px 10px;
        list-style:none;
        left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
        position: absolute;
        top:-20px;
        /*z-index:-1;*/
    }
    ul#showInfoNav ul li
    {

        float:none;
    }
    ul#showInfoNav ul a{
        white-space:nowrap; 
    }

    ul#showInfoNav li:hover ul{ /* Display the dropdown on hover */
        left:0; /* Bring back on-screen when needed */
    }

このz-indexの問題もあります。-1 に設定すると、画像の後ろにも隠されます。

4

5 に答える 5

1

、、を見て.hover()ください.slideUp/Down()。より「永続的な」状態が必要な場合は、次のコードでに.hover置き換えることもできます。.toggle両方の鍵は、コールバック関数を利用することです。

HTML

<a href="#">Click to see a list</a>
<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

jQuery

$('ul').hide(); // doing this rather than via CSS for a fail-safe for JS
$('a').hover(function() {
    $('ul').slideDown('fast');
    }, function() {
    $('ul').slideUp('slow')
})​
于 2012-09-28T14:42:27.193 に答える
1

slideToggle()jQuery が提供するメソッドを調べることもできます。

ここで例を参照してください。

同様の関数はslideUp()でslideDown()あり、より一般的には、animate()

于 2012-09-28T14:27:15.697 に答える
1

jQuery UI エフェクト、特に slide() を確認してください。

http://docs.jquery.com/UI/Effects/Slide

于 2012-09-28T14:17:05.817 に答える
0

これが私が見つけた解決策です。彼のタグ<ul>間を移動しているときにスライドアップしたくないので、これを使用しました。<li>

    $('ul.slideShow').hide();
    $("#showInfoNav li").click(function () {
        $(this).find('ul.slideShow').slideDown('fast').show();
        $(this).hover(function () {   // PARENT

        }, function () {
            $(this).parent().find("ul.slideShow").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up 
        });

    });
于 2012-09-29T14:34:28.710 に答える
0

jQuery fadeIn() を使用する場合、デュレーションも指定できます。簡単なサンプルは次のとおりです。

  1. li の ID またはクラスを指定します ( <li id="actor1">soemthing</li>)

  2. JS ファイルまたはスクリプト タグで次を使用します。

    $("#actor1).hover(function(){ $(this).slideDown('slow')}, function(){ $(this).slideUp('slow') });

編集:スライド効果が必要なことがわかりましたので、fadeIn()andfadeOut()をslideDown()andに変更しましたslideUp()。ここで彼らのドキュメントを読むことができます

于 2012-09-28T14:23:44.643 に答える