jquery - 在 jquery 中显示和隐藏描述

Question

我有动态生成的元素列表。views-row-1、views-row-2、views-row-3 等。里面有 contactTitle 和 contactDesc 。

默认情况下我只想显示第一个描述并想隐藏其他描述。如果我单击 views-rows-2 的 ContactTitle 我想显示 contactDesc 第二个 View 并隐藏其他 View contactDesc ，反之亦然。

如果我点击第一个标题，它会显示所有 desc。我想显示相关 View 的 contentDesc 并隐藏其他 View desc

jQuery(document).ready(function($) {
  $('.contactTitle').click(function(){
    $('.contactDesc').show();
  });
});

.contactDesc{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="views-row views-row-1 views-row-odd views-row-first">
  <div class="contactTitle">
     Title 1
  </div> 
  <div class="contactDesc">
     desc 1
  </div> 
</div>
<div class="views-row views-row-2 views-row-even">
  <div class="contactTitle">
     Title 2
  </div> 
  <div class="contactDesc">
     Desc 2
  </div> 
</div>
<div class="views-row views-row-3 views-row-odd">
  <div class="contactTitle">
     Title 3
  </div> 
  <div class="contactDesc">
     Desc 3
  </div> 
</div>

Answer 1

将您的 JS 更改为:

jQuery(document).ready(function($) {
  $('.contactTitle').click(function(){
    if(!$(this).hasClass('active')){
      $('.contactDesc').slideUp();
      $('.contactTitle').removeClass('active');
      $(this).next('.contactDesc').slideDown();
      $(this).addClass('active');
    } 
  });
});

Fiddle