javascript - 从父 div 内的左侧隐藏 div 滑入(多个具有相同类的 div)

Question

所以，我有多个带有多个隐藏 div 的 div。我想在链接悬停时显示每个 div。

我的问题是代码似乎显示和隐藏所有隐藏的 div。我只想显示触发悬停的链接父级内的隐藏 div。

似乎解释有点不好，所以让我这样说。假设有 10 个 div，有人将链接悬停在 div 1 内，我只想显示 div 1 内隐藏的 div。

这是我的代码。

<div class="col-md-3 col-sm-6 posts">
  <div class="div-hidden"> 

    <!-- hidden content here --> 

  </div>
  <span class="thumbnail text-center"> <img src="imge" alt="">
  <h3>Titile</h3>
  <h4>Description</h4>
  <hr class="line">
  <div class="row">
    <div class="col-md-6 col-sm-6"> <a href="" class="fa fa-heart-o"></a> </div>
    <div class="col-md-6 col-sm-6"> <a href="" class="fa fa-eye show-hidden"></a> </div>
  </div>
  </span> </div>

<Script>        
   $(function() {
    $('.div-hidden').hide();
    $('.show-hidden').hover(function() {

    $('.div-hidden').show("slide", { direction: "left" }, 400); 

    });

    $('.show-hidden').mouseout(function() { 

    $('.div-hidden').hide("slide", { direction: "left" }, 400); 

    });

});     
</script>

我还尝试在代码中使用 $(this) ，这使得代码停止工作。

$(this).('.div-hidden').show("slide", { direction: "left" }, 400); 

感谢您的时间和投入。

Answer 1

你可以使用这个

$(this).closest('div.posts')
        .find('.div-hidden').show("slide", { direction: "left" }, 400);

或者

$(this).parent().parent().
        .parent().parent()
         .find('.div-hidden').show("slide", { direction: "left" }, 400);