在jquery

Question

我想在列中添加背景颜色。我有在dynamic.views-row-1，views-row-2，views-row-3等中生成的项目列表。其中包含contactTitle和contactDesc。

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

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

如果我点击'标题2'，'标题1'为紫色'标题2'为灰色，'desc 2'为灰色，'标题3'为紫色。我希望根据点击的标题显示紫色和灰色。

如果单击标题1，则显示desc 1   标题1 -purple，desc 1 -gray，title 2 -purple，title 3 -gray 如果单击标题2，则只显示desc 2   标题1 - 紫色，标题2 - 灰色，desc 2 - 紫色，标题3 - 灰色 如果单击标题3，则只显示desc 3   标题1 - 紫色，标题2 - 灰色，标题3 - 灰色，desc 3紫色

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

您可以删除类并在点击时应用于其他元素。

＆＃13;

＆＃13;

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');
    } 
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;