Javascript 如何让这个jQuery脚本工作

我有一点jQuery代码，我正试图在这里开始工作。我基本上有一个垂直导航菜单，其中有两个项目有jQuery下拉菜单，弹出到侧面。但是，当您将鼠标快速悬停在它们上方时，它们会相互重叠显示。因此，我试图实现的是，如果一个悬停并弹出，如果另一个已经显示，它将滑动并隐藏。下拉式卡车已经存在，我正在添加引擎。我会继续努力，但如果有人能帮忙，我将不胜感激

/* Dropdown Menu Trucks*/
$("#menu-main-menu .show-dropdown").hover(function(){
    $("#dropdown").slideDown('fast');
});

$("#dropdown").mouseenter(function(){
    $("#dropdown").show();
});

$("#dropdown").mouseleave(function(){
    $("#dropdown").slideUp('fast');
});

// ----------------------------

/* Dropdown Menu Engines */
$("#menu-main-menu .show-dropdown2").hover(function(){
    $(".dropdown-engines").slideDown('fast');
});

$(".dropdown-engines").mouseenter(function(){
    $(".dropdown-engines").show();
});

$(".dropdown-engines").mouseleave(function(){
    $(".dropdown-engines").slideUp('fast');
});

if ($('#dropdown').is(':visible')) {
    $(".dropdown-engines").slideUp();
}
else if ($('.dropdown-engines').is(':visible')) {
    $("#dropdown").slideUp();   
}

编辑：让我用另一种似乎更容易实现的方法来处理这个问题

$("#menu-main-menu .dropdown2").hover(function(){  // hover over .dropdown2 
                                                   // show #dropdown-engine
    $("#dropdown-engine").slideDown('fast');
});

$("#dropdown-engine").mouseenter(function(){      // mouse enter #dropdown-engine
                                                  // show #dropdown-engine
    $("#dropdown-engine").show();
});

$(".dropdown2" || "#dropdown-engine").mouseleave(function(){

    $("#dropdown-engine").slideUp('fast');       // mouse leave #dropdown-engine
                                                 // *or .dropdown2 slideup
});                                              // but only if not hovering on either

---

这个问题我并不完全清楚，但我认为这是我想要的。
我注意到您使用了JSFIDLE中不存在的id，并且使用了类和id的混合。尽量保持一致性和干净利落，通过使用数据目标和示例中的类，代码更简洁。

$（函数（）{
$（“.dropdown”）.hide（）；//在开始时隐藏所有下拉列表
$（“.show下拉列表”）.mouseenter（函数（）{
//在鼠标输入.show下拉列表时，我们滑动所有.dropdowns
$（“.dropdown”）.slideUp（“快速”）；
//然后，我们获得要通过数据目标属性显示的下拉列表的ID，并将其向下滑动。
$（“#”+$（this.attr（“数据目标”））.slideDown（“快速”）；
});
});

我最后只使用了hide（）；悬停以隐藏我不想看到的元素。我对这件事想得太多了。感谢所有回答的人。

拉小提琴，会有人更愿意帮忙。的确，包括HTMLUse插件-此插件为触发器添加了一个小延迟，以解决此问题。这是我无法重新创建它现在正在做的事情，但此基本调用显示了我正在尝试做的事情。是的，该小提琴很可能与我正在使用的不一样，我尝试快速将其组合在一起。我正在使用一个自定义的WordPress主题，它不是为任何其他人设计的，不容易修改。理想情况下，我会在WP菜单设置中添加子菜单项，它会自动执行我需要的操作，但它们是在一个单独的js文件和两个不同的样式表中完成的。混合ID和类的原因是，他们使用PHP动态地将ID添加到卡车的li中，而我对PHP不是很在行，所以我使用了一个插件将类添加到引擎的li中。我将尝试您的解决方案，看看是否可以让它与我已有的解决方案一起工作，谢谢