jquery - 在jquery中添加背景颜色

Question

我想在列中添加背景颜色。我有动态生成的元素列表。views-row-1、views-row-2、views-row-3 等。里面有 contactTitle 和联系方式

如果我单击 views-rows-2 的 ContactTitle，我想显示第二个 View 的 contactDesc 并隐藏其他 View contactDesc，反之亦然。它工作正常。

我想在备用单元格中添加颜色如果我选择“标题 1”，它想要紫色，“desc 1”想要灰色，“标题 2”是紫色，“标题 3”是灰色。

如果我单击“title 2”，“title 1”为紫色，“title 2”为灰色，“desc 2”为灰色，“title 3”为紫色。我想根据点击的标题交替显示紫色和灰色。

如果点击 title 1 desc 1 可见 title 1 -purple,desc 1 -gray,title 2 -purple,title 3 -gray如果点击 title 2 只有 desc 2 可见 标题 1 - 紫色，标题 2 - 灰色，desc 2 - 紫色，标题 3 - 灰色如果点击 title 3 只有 desc 3 可见 title 1 -purple,title 2 -gray,title 3 -gray,desc 3-purple

jQuery(document).ready(function($) {
  $('.views-row-1 .contactDesc').css('display','block');
	$('.views-row-1 .contactTitle').addClass('active');
  $('.contactTitle').click(function(){
    if(!$(this).hasClass('active')){
      $('.contactDesc').slideUp();
      $('.contactTitle').removeClass('active');
      $(this).next('.contactDesc').slideDown();
      $(this).addClass('active');
    } 
  });
});

.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

您可以通过点击删除类并应用到其他元素。

jQuery(document).ready(function($) {
  $('.views-row-1 .contactDesc').css('display','block');
	$('.views-row-1 .contactTitle').addClass('active');
  
  $('.contactTitle').click(function(){ 
    
    if(!$(this).hasClass('active')){
      $('.contactDesc').slideUp();
      $('.contactTitle').removeClass('active');
      $('.contactTitle').addClass('grey-bg');
      $(this).next('.contactDesc').slideDown(function(){
      $('.colorme').removeClass('grey').removeClass('purple');
          $('.colorme:visible:odd').addClass('purple');
          $('.colorme:visible:even').addClass('grey');
      });
      $(this).addClass('active');
    } 
  });
});

.contactDesc{
  display:none;
}
.purple{
  background:purple;
}
.grey{
  background:grey;
}

<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 colorme">
     Title 1
  </div> 
  <div class="contactDesc colorme">
     desc 1
  </div> 
</div>
<div class="views-row views-row-2 views-row-even">
  <div class="contactTitle colorme">
     Title 2
  </div> 
  <div class="contactDesc colorme">
     Desc 2
  </div> 
</div>
<div class="views-row views-row-3 views-row-odd">
  <div class="contactTitle colorme">
     Title 3
  </div> 
  <div class="contactDesc colorme">
     Desc 3
  </div> 
</div>