Jquery 下拉式菜单http://www.teslamotors.com/

我的客户要求的是使他们的网站菜单像。到目前为止，我做了以下几点

HTML

JS

我可以在包含div的子菜单中上下滑动，但出现动画问题。我的鼠标离开菜单滑块并进入主菜单li，然后动画出现两次。

---

我无法解决这个问题。有人可以帮忙吗。

看起来您同时使用了top属性的动画和jQ

slideDown

功能，您应该只使用其中一个。两者都具有在菜单中设置动画的效果（slideDown函数设置菜单高度的动画，

top

属性的动画将影响菜单的位置）

特斯拉只使用top属性，我建议您也这样做。只需使用slideDown/slideUp动画删除回调

例如：

$('#menu_slider').animate({
    top: '61px'
}, 1000, function () {
    $('#menu_slider').slideDown(1000);
});

应该变成：

$('#menu_slider').animate({
    top: '61px'
}, 1000);

我还建议您将幻灯片菜单的当前状态存储在布尔值中，并在设置动画时对其进行测试。大概是这样的：

var showing = false;
function showslideout(){
    if(!showing){
        showing = true;
        //code to show the menu here
    }
}
function hideslideout(){
    if(showing){
        showing = false;
        //code to hide the menu here
    }
}

请注意，在动画之前布尔值是如何更改的。这意味着，如果在第一次调用完成之前多次调用showslideout，动画将只出现一次

作为旁注，注意使用明确的高度。例如，如果您想更改主导航栏的高度，这将使站点难以维护。特斯拉将动态获取主导航栏的高度jQ。它们存储两个值，可分配给slideNav的

top

属性以隐藏或显示它：

var hideY =- $slideNav.height() + $("#main-nav-back").height()-5;
var showY = $("#main-nav-back").height();

---

希望这有帮助

我在网站上没有看到他们的下拉菜单？不客气！如果它解决了您的问题，请将其标记为答案：）

$('#menu_slider').animate({
    top: '61px'
}, 1000);

var showing = false;
function showslideout(){
    if(!showing){
        showing = true;
        //code to show the menu here
    }
}
function hideslideout(){
    if(showing){
        showing = false;
        //code to hide the menu here
    }
}

var hideY =- $slideNav.height() + $("#main-nav-back").height()-5;
var showY = $("#main-nav-back").height();