顯示/隱藏懸停的特定部分並隱藏鼠標移出的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(); 
    }); 
});