我想在列中添加背景色。我有动态生成的项目列表.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/