Jquery隐藏和显示css类，但只有当前div中的内容，而不是任何其他

Question

我在 wordpress 中有一个循环，它生成一个 div，里面有两个 div，一个隐藏和一个显示元素，如下所示 -

<div class="vacancy-desc">
 <div class="short-desc">
   Content
 </div>                 
 <div class="full-desc">
   Content               
 </div>       
 <a href="#" class="link show">MORE <span class="fa fa-chevron-right"></span></a>
 <a href="#" class="link hide"><span class="fa fa-chevron-right"></span> LESS</a>
</div>

因为这是在循环中，所以同一页面上可能有多个这样的框。

我希望能够单击 .show 链接以展开 .full-desc（通过 css 隐藏）和 .show 消失，以及 .hide 出现（也被 css 隐藏） .然后我想要相反的地方，我可以点击 .hide 它将切换 .full-desc 关闭、消失和取消隐藏 .show。

我可以让这一切发生，但它针对页面上的每个 .hide .show 。我缺少什么让我可以创建此脚本但仅针对其父 div 中的类？

<script>
$('.vacancy-desc a.show').click(function(event){
  event.preventDefault();
  $(this).prev().slideToggle('slow');
  $(this).hide();
});

$('.vacancy-desc a.hide').click(function(event){
  event.preventDefault();
  $(this).prev().slideToggle('slow');
  $(this).hide();
});
</script>

Answer 1

你可以试试这样的：

<script>
    $('.vacancy-desc a.show').click(function(event){
        event.preventDefault();
        var $this = $(this);
        $this.parents('.vacancy-desc').find('.full-desc').slideToggle('slow');
        $this.hide();
        $this.parents('.vacancy-desc').find('a.hide').show();
    });

    $('.vacancy-desc a.hide').click(function(event){
          event.preventDefault();
          var $this = $(this);
          $this.parents('.vacancy-desc').find('.full-desc').slideToggle('slow');
          $this.hide();
          $this.parents('.vacancy-desc').find('a.show').show();
    });
</script>