Question

我有一些jQuery代码，我想在这里工作。我基本上有一个垂直导航菜单，其中有两个项目，其中有jQuery下拉菜单弹出到一边。但是，当您将它们快速悬停在它们上时，它们会相互重叠显示。所以我想要完成的是，如果一个人徘徊并弹出，如果另一个已经显示，它将会滑动并被隐藏。下降卡车已经存在我正在添加引擎一。我将继续努力，但如果有人能帮忙，我会很感激。

$("#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

编辑：让我以另一种方式来实现，这似乎更容易实现..

 int new_function() {
     int input;
     ... // Do the rest of your function here
 }

 int main() {
     int i;
     for (i=0; i < XXX; i++) {
         new_function();
     }
 }

Answer 1

这个问题对我来说并不完全清楚，但我认为这是需要的我注意到你使用了jsfiddle中没有的id并使用了类和id混合的id。尝试保持一致并认为DRY，通过使用数据目标和示例中的类，代码更清晰，更短。

＆＃13;

$(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");
    });
});

＆＃13;

<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>

＆＃13;

Answer 2

我最后只使用了hide（）;在悬停以隐藏我不想看到的元素。我严厉地过度思考这个问题。感谢任何回答的人。

如何让这个jQuery脚本工作

2 个答案: