我想在列中添加背景色。我有动态生成的项目列表.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-紫色,描述1-灰色,标题2-紫色,标题3-灰色
如果单击标题2,则仅显示desc 2
  标题1-紫色,标题2-灰色,描述2-紫色,标题3-灰色
如果单击标题3,则仅显示desc 3
  标题1-紫色,标题2-灰色,标题3-灰色,描述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>

最佳答案

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



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>

关于jquery - 在jQuery中添加背景色,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42786972/

10-12 12:55
查看更多