Question

我使用Jquery有一个简单的问题。我想在菜单标题下显示详细信息，但界面不是那么顺利。经过几个小时的尝试，我回到了开始，看看是否有一个简单的答案

查看this示例

两个问题：

如果您一次鼠标悬停在多个类别上以获得所需的类别，动画仍会运行所有其他动画，而不是停止其他动画，并且仅动画鼠标当前悬停的动画
如果将鼠标悬停在已打开的类别上，它仍会运行动画，但我只希望在内容尚未显示时运行动画。是否有一个简单的if语句可以做到这一点？

Answer 1

$('.content').hide();
var $elms = $('.fruit, .vegetable, .dairy');
$elms.hover(function() {
    var $content = $(this).next('.content');
    $content.stop(1, 1).slideToggle(400);
});

http://jsfiddle.net/elclanrs/GBkMB/1/

编辑：

为了防止内容滑回，您可以嵌套div，如下所示：

<div class="fruit">fruit
    <div class="content fruit_types">apple<br/>bannana<br/>orange</div>
</div>
<div class="vegetable">vegetable
    <div class="content vegetable_types">celery<br/>lettuce<br/>cucumber</div>
</div>
<div class="dairy">dairy
    <div class="content dairy_types">milk<br/>cheese<br/>butter</div>
</div>

JQ：

$('.content').hide();
var $elms = $('.fruit, .vegetable, .dairy');
$elms.hover(function() {
    var $content = $(this).children('.content'); //<-`children()` not `next()`
        $content.stop(1,1).slideToggle(400);

});

示例：http://jsfiddle.net/elclanrs/GBkMB/5/

Answer 2

我现在编辑你的小提琴看起来像这样。应该让你知道你想要继续前进：

http://jsfiddle.net/GBkMB/4/

$("body").on("hover", ".fruit, .vegetable, .dairy", function(event){
  if(event.relatedTarget != $(this).next(".content")[0]){
      if(event.type == "mouseenter"){
         $('.content').slideUp('slow');
         $('.'+$(this).attr("class")+'_types').slideDown('slow');
      }else if(event.type == "mouseleave"){
         $('.content').slideUp('slow');
      }
  }              
});
$("body").on("mouseleave", ".content", function(event){
    if(event.relatedTarget != $(this).prev("div")[0]){
      $(this).slideUp('slow');           
    }
});

或：http://jsfiddle.net/GBkMB/6/ @elclanrs回答++

$('.content').on("mouseleave", function(event){
   if(event.relatedTarget != $(this).prev("div")[0]){
      $(this).slideUp('slow');           
    }
});
var $elms = $('.fruit, .vegetable, .dairy');
$elms.on("hover", function(event) {
    var $content = $(this).next('.content');
    if(event.relatedTarget != $content[0]){
        $content.stop(1,1).slideToggle(400);
    }
});

Jquery只有在尚未显示时才会向下滑动

2 个答案: