Как получить скрипт jQuery для работы

Question

У меня есть код 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 

Answer 1

Я в конечном итоге просто используя шкурку(); на hover, чтобы скрыть элемент, который я не хотел видеть. Я сильно задумался над этим. Спасибо всем, кто ответил.

Answer 2

Вопрос не совсем ясно для меня, но я думаю, что это нужно.
Я заметил, что вы использовали id, которые не присутствуют в jsfiddle, и используют классы и id. Постарайтесь быть последовательными и думать DRY, используя целевые данные и классы, как в примере, код чище и короче.

$(function(){ 
 
    $(".dropdown").hide();//hide all dropdowns on start 
 
    $(".show-dropdown").mouseenter(function(){ 
 
     //on mouse enter of a .show-dropdown, we slideup all .dropdowns 
 
     $(".dropdown").slideUp("fast"); 
 
     //then we get the ID of the dropdown we want to show through the data-target attribute, and slide it down. 
 
     $("#"+$(this).attr("data-target")).slideDown("fast"); 
 
    }); 
 
}); 
 

 
\t

<ul> 
 
    <li class="show-dropdown" data-target="dropdown-trucks"><!--data target is the ID of dropdown you want to show--> 
 
     <a href="#">Trucks</a> 
 
    </li> 
 
    <li class="show-dropdown" data-target="dropdown-engines"> 
 
     <a href="#">Engines</a> 
 
    </li> 
 
</ul> 
 

 

 

 
<ul id="dropdown-trucks" class="dropdown"> 
 
    <li><a href="#">Truck 1</a></li> 
 
    <li><a href="#">Truck 2</a></li> 
 
</ul> 
 

 
<ul id="dropdown-engines" class="dropdown"> 
 
    <li><a href="#">Detroit Series 60 Engine</a></li> 
 
    <li><a href="#">Cummins N14 Engine</a></li> 
 
</ul> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>