0

メインナビゲーションのサブメニューをマウスオーバーでスライドダウンし、マウスアウトでスライドアップしたい。

以下は私が取り組んでいるページです: http://jaspreetkaur.com/marg-moll/

以下は、効果を作成しようとした jQuery コードですが、結果は少し奇妙です。コードで何が間違っていたのかわかりません。

$('nav > ul > li').hover(
    function(e) {
        e.stopPropagation();
        $(this).find('ul').stop(true, true).slideDown(200);
    },
    function(e) {
        e.stopPropagation();
        $(this).find('ul').stop(true, true).slideUp(200);
    }
);
4

4 に答える 4

0

問題がCSSコードに関連していることがわかりました。間違った場所でposition：absoluteを使用しました。現在は正常に動作しています。

迅速なサポートをありがとうございました:)

于 2012-06-06T10:00:38.973 に答える
0

私はあなたのサイトを見ました, あなたが使用している色はとても素敵です. とにかく、 .slideToggle("slow"); を使用できます。.slideDown(200); の代わりに ここのAPI がお役に立てば幸いです。

于 2012-06-06T09:33:45.867 に答える
0

私は、あなたの質問であなたのスライドのアニメーション効果について言及したと思います。

前にコメントしたように、 youslideDown()とでもう少し期間を使用できます。slideUp()

例えば。

$(this).find('ul').stop(true, true).slideDown(1000);

$(this).find('ul').stop(true, true).slideUp(1000);

など、好きなもの。

于 2012-06-06T09:36:28.693 に答える
0

簡単なモックアップを次に示します。

HTML:

<li><a href="http://www.w3schools.com">Home</a></li>
<li><a href="http://www.w3schools.com">Biographie</a>
<ul>                                   
     <li><a href="http://www.w3schools.com">Einleitung</a></li>
     <li><a href="http://www.w3schools.com">Matisse</a></li>  
     <li><a href="http://www.w3schools.com">Mein Portraitt</a></li>                                   
</ul> 
</li>
<li><a href="http://www.w3schools.com">Werke</a></li>

JavaScript:

$(function() {
    $("body li").each(function() {
        if ($(this).find("ul").length > 0) {    

            $(this).mouseenter(function() {
                $(this).find("ul").stop(true, true).slideDown();
            });

            $(this).mouseleave(function() {
                $(this).find("ul").stop(true, true).slideUp();
            });

            $(this).find("ul").mousemove(function() {
                $(this).stop(true, true).show();
            });
        }
    });
});​

CSS

body ul{
    display: none;
    position:absolute;
    width: 40%;        
    background: #7ac0da;
    border-top: 5px solid #7ac0da;
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}
body ul li a{
    line-height: 3.1em;
    color: white !important;
}

body ul li a:hover{    
    color: #D14836 !important;
}

body li{
float:left;
margin: 5px;
}

ここで見ることができます：http://jsfiddle.net/kHnpu/

よろしく

</p>

于 2012-06-06T09:44:00.343 に答える