Question

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

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

我用的脚本，

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

我需要的输出是，

操作必须是单独的框，而不是一次所有框。（例如，当点击添加按钮而不是仅仅一个框时，橙色框显示在所有黑框中。）
当鼠标离开黑盒子时，类（一）隐藏，而（中间文本）显示。但是，在点击添加和取消以及鼠标输出后，类（一个）没有隐藏。

Answer 1

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

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

Answer 2

我为你做了一个工作小提琴： 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每个函数，您只能将hide / show应用于当前的悬停元素。在点击功能中，您使用$(this).parents().eq(1)的两位父母遍历dom，然后找到该父级的子级“.panel”。

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

如果你希望.bnel在悬停后滑动，那么这是可能的： http://jsfiddle.net/NKC2j/1781/

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

2 个答案: