在悬停时显示/隐藏特定 div 并在鼠标移出时隐藏 div

Question

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

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

这是小提琴（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. 当鼠标离开黑框时，类 (one) 隐藏，而 (middle-text) 显示。但是，在点击添加和取消并鼠标移出后，类（一）并没有隐藏。

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 each 函数，您可以仅将隐藏/显示应用于当前悬停的元素。 在 click 函数中，您使用 $(this).parents().eq(1) 遍历两个父级的 dom，然后找到该父级具有“.panel”类的子级。

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

如果您希望 .panel 在悬停后向上滑动，则可以这样做： 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();
  });
});