jquery - 上/下滑动下拉菜单

Question

我希望主导航的子菜单在鼠标悬停时向下滑动，在鼠标悬停时向上滑动。

以下是我正在处理的页面：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);
    }
);

Answer 1

我看了你的网站，你用的颜色很漂亮。无论如何，您可以使用 .slideToggle("slow"); 而不是 .slideDown(200); API在这里 ，希望对您有所帮助。

Answer 2

我觉得很奇怪，你在你的问题中提到的是关于你的滑动的动画效果。

正如我之前评论过的，你可以在你slideDown()和中使用更多的持续时间。slideUp()

例如。

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

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

等等你喜欢什么。

Answer 3

这是一个快速模型：

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>

Answer 4

我发现这个问题与我的 CSS 代码有关，我在错误的地方使用了 position:absolute。现在工作正常。

谢谢大家的快速帮助:)