jQuery - 悬停div，滑入div，并能够悬停在新打开的div

Question

我试图将鼠标悬停在底部栏上，该栏会在另一个div的正上方滑动，我可以点击位于其中的项目然后当我把鼠标都关掉时，“出现的div”会滑落。

但是，当我从底部栏移动鼠标点击新出现的div中的某个内容（以div滑动）时，它重新启用了效果，我该如何停止此操作，以便可以将鼠标悬停在滑动div在启用），并有它如何重新启动效果，基本上把它放入一个相同的slideDown/slideUp效果的循环。

这里是我的代码：

$(".playlist").hide(); 
$(".player, .playlist").hover( 
    function(){ $(".playlist").slideDown(); }, 
    function(){ $(".playlist").slideUp(); } 
); 

而我的HTML：

<div class="playlist"> 
<!-- This would display some content that I can click on --> 
</div> 

<div class="player"> 
<!-- This expands across the whole window and is fixed to the bottom --> 
</div> 

Answer 1

http://jsfiddle.net/jv25Y/

新的标记

<div class="player"> 
    <div class="playlist"> 
     This would display some content that I can click on 
    </div> 
    This expands across the whole window and is fixed to the bottom 
</div> 

新的JS

$(function(){ 
    $(".playlist").hide(); 
    $(".player").hover( 
     function(){ $(".playlist").slideDown(); }, 
     function(){ $(".playlist").slideUp(); } 
    ); 
}); 

将类似的东西的工作？基本上播放列表现在包含在播放器中。因此，当您尝试点击播放列表中的链接时，您的鼠标不会离开播放器。如果这并不很适合（由于您的网页等造型），你也可以换一个单元周围的播放列表和播放器，然后调用悬停于它，而不是像这样，

标记

<div id="wrapper"> 
    <div class="playlist"> 
     This would display some content that I can click on 
    </div> 
    <div class="player"> 
     This expands across the whole window and is fixed to the bottom 
    </div> 
</div> 

JS

$("#wrapper").hover( 
    function(){ $(".playlist").slideDown(); }, 
    function(){ $(".playlist").slideUp(); } 
);