使用jQuery下拉菜单

Question

我正在制作一个下拉菜单，但没有成功。
我想要像索尼的下拉菜单一样的功能。我甚至试图模仿这种效果，但我遇到了一些困难。

我的HTML：

<div id="main_menu">
<div id="main_menu_container">
    <div id="main_menu_links">
        <a href="" class="main_menu_link">Startseite</a>
        <a id="drop_down_link1" class="main_menu_link">Events</a>
        <a id="drop_down_link2" class="main_menu_link">Clan</a>
        <a id="drop_down_link3" class="main_menu_link">Irgendetwas</a>
    </div>
</div>
<div id="drop_down_container">
    <div id="drop_down_content1" class="drop_down_content"></div>
    <div id="drop_down_content2" class="drop_down_content"></div>
    <div id="drop_down_content3" class="drop_down_content"></div>
</div>

jQuery的：

$("#drop_down_link1").mouseenter(function (){
    $("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1").mouseleave(function (){
    $("#drop_down_content1").delay(350).slideUp();
});

小提琴

我的脚本中的问题是，当我离开drop_down_link1或drop_down_content1然后内容'slideUp'但是当我从drop_down_link1悬停到drop_down_content1时，那么应该没有该函数。

所以我的问题是：

1. 我怎么能这样做，我可以用鼠标在链接和'内容'之间移动而不关闭'内容'？
2. 我的代码非常不专业。 当'Events'和'Clan'具有相同的功能时，我如何做到这一点让我不重复自己？

Answer 1

http://jsfiddle.net/PKvZ2/

尝试使用此代码。 我补充说：

$("#drop_down_link1,#drop_down_container").mouseenter(function (){
    $("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1,#drop_down_container").mouseleave(function (){
    $("#drop_down_content1").delay(350).stop().slideUp();
});

或这个

$("#drop_down_link1,#drop_down_container").hover(function (){
    $("#drop_down_content1").stop().slideDown();
},function(){
        $("#drop_down_content1").stop().slideUp();

});

http://jsfiddle.net/bT8Cp/

Answer 2

很简单！ 只需处理#drop_down_link1和#drop_down_content1事件，如下所示

    $("#drop_down_link1,#drop_down_content1").mouseenter(function (){
       $("#drop_down_content1").stop().slideDown();
     });
   $("#drop_down_content1, #drop_down_link1").mouseleave(function (){
      $("#drop_down_content1").delay(350).stop().slideUp();
    });

2。

   $('#main_menu_container a.main_menu_link').each(function(index,item){
      alert(index);
      var $this=$(this),
          $dropdownContent=$('#drop_down_container .drop_down_content')
      [index];

     ......

  });