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然后内容'slideUp'但是当我从drop_down_link1悬停到drop_down_content1时，那么就不应该有这个功能。

所以我的问题是：

我怎样才能在没有'内容'的情况下用鼠标在链接和'内容'之间移动？
我的代码非常不专业。当“事件”和“氏族”具有相同的功能时，我如何才能使自己不重复？

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 mouseenter事件，如下所示

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

     ......

  });

使用jQuery下拉菜单

2 个答案: