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

这样的东西有用吗？现在基本上播放列表包含在播放器中。因此，当您尝试单击播放列表中的链接时，您的鼠标不会离开播放器。如果这不太适合（由于页面上的样式等），您也可以将一个元素包裹在播放列表和播放器周围，然后在其上调用悬停，如下所示，

Markup

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