javascript - 使用 jQuery 的下拉菜单

Question

我正在制作一个下拉菜单，但没有成功。
我想要与 Sony 的下拉菜单相同的功能.我什至试图模仿这种效果，但我遇到了一些困难。

我的 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();
});

FIDDLE

我脚本中的问题是，当我离开 drop_down_link1 或 drop_down_content1 然后content 'slideUp' 但是当我从 drop_down_link1 悬停到 drop_down_content1 时不应该有这个功能。

所以我的问题是:

1. 如何才能在不关闭“内容”的情况下使用鼠标在链接和“内容”之间移动？
2. 我的代码很不专业。当“事件”和“部落”具有相同的功能时，我该如何做到不重复？

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/