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 here 我希望这会对你有所帮助。

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/

此致

Answer 4

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

谢谢大家的快速帮助：）

向上/向下滑动下拉菜单

4 个答案: