显示/隐藏悬停的特定部分并隐藏鼠标移出的div

Question

我必须执行隐藏操作并在单击兄弟上的按钮时显示div。

但是，操作也发生在其他divs中。你可以在下面的链接中看到它。

这是小提琴（http://jsfiddle.net/NKC2j/1767/）。

脚本我用，

$(".panel").hide(); 
    $(".two").hide(); 

    $(document).ready(function(){ 
     $(".slidedown").click(function(){ 
     $(".panel").slideDown("slow"); 
     $(".one").hide(); 
     $(".two").show(); 
     }); 
     $(".slideup").click(function(){ 
     $(".panel").slideUp("slow"); 
     $(".two").hide(); 
     $(".one").show(); 
     }); 
    }); 

我需要的是输出，

1. 操作必须是单独的盒子，而不是所有的箱子在同一时间。 （即，当单击添加按钮而不是仅一个框时，橙色框显示在所有黑色框中）。

2. 当鼠标离开黑色框时，类（一）隐藏（中间文字）显示。但是，在点击添加并取消并鼠标移出之后，类（一）不会隐藏。

Answer 1

我做了一个工作捣鼓你： http://jsfiddle.net/NKC2j/1780/

$(".sep-prod").each(function(){ 
    $(".one,.two,.panel").hide(); 
     $(this).hover(function(){ 
      $(this).find(".middle-desc").hide(); 
      $(this).find(".one").show(); 
     },function(){ 
      $(this).find(".one,.two,.panel").hide(); 
      $(this).find(".middle-desc").show(); 
    }); 
}); 

$(".slidedown").click(function(){ 
     $(this).parents().eq(1).find(".one").hide(); 
     $(this).parents().eq(1).find(".two").show(); 
     $(this).parents().eq(1).children(".panel").slideDown("slow"); 
}); 

通过使用jQuery您可以将隐藏/每个功能仅显示当前的悬停的元素。 在点击功能中，您可以通过$(this).parents().eq(1)两位父母向上查找dom，然后查找该父级的子级“.panel”。

$(this).parents().eq(1).find(".one").hide();

如果你想后悬停了.panel到效果基本show，那么这是可能的： http://jsfiddle.net/NKC2j/1781/

Answer 2

您需要的是识别给定产品的容器。像这样的东西。

$(".slidedown").click(function(event){ 
     var $productContainer = $(event.target).closest('.sep-prod'); 
    $productContainer.find(".panel").slideDown("slow"); 
    $productContainer.find(".one").hide(); 
    $productContainer.find(".two").show(); 
    }); 
    $(".slideup").click(function(){ 
     var $productContainer = $(event.target).closest('.sep-prod'); 
    $productContainer.find(".panel").slideUp("slow"); 
    $productContainer.find(".two").hide(); 
    $productContainer.find(".one").show(); 
    }); 
});