Question

即使在激活之后我也有了替代颜色的手风琴。现在我想为活动单元格改变相同的颜色。现在我想保持活动标题是紫色，而主动标题是灰色。

现在正在使用灰色desc正确处理紫色标题，但灰色标题需要更改puprle颜色，desc为灰色。

例如：如果我点击chennai，chennai -india标题是紫色的，它的desc是grwy hydrabad -india也是紫色，gurgon -india是紫色的（现在正在工作）

如果我点击hydrabad，chennai -india标题是紫色，hydrabad -india也是紫色，hydrabad的desc in in grey和gurgon -india再次是紫色

如果我点击gurgoan hydrabad想要灰色和chennai是紫色的 fiddle

jQuery(document).ready(function($) {
$('.view-content .contactDesc:first').css('display','block');
	$('.view-content .contactTitle:first , .view-content .contactDesc:first').addClass('active');
	$('.view-content .contactTitle:first .glyphicon').addClass('rotate');
	$('.officeAddress .colorme:visible:odd').addClass('grey');
    $('.officeAddress .colorme:visible:even').addClass('purple');
    $('.contactTitle').click(function(){ 
    if(!$(this).hasClass('active')){
	$('.contactTitle .glyphicon ').removeClass('rotate');
	$(this).find('span.glyphicon').toggleClass('rotate');
      $('.contactDesc').slideUp();
      $('.contactTitle').removeClass('active');
	  $('.contactDesc').removeClass('active');
	  $(this).next('.contactDesc').addClass('active');
      $(this).next('.contactDesc').slideDown(function(){
      $('.officeAddress .colorme').removeClass('grey').removeClass('purple');
          $('.officeAddress .colorme:visible:odd').addClass('grey');
          $('.officeAddress .colorme:visible:even').addClass('purple');
      });
      $(this).addClass('active');
    } 
     });
});

.officeAddress{
  width:960px;
  margin:0 auto;
  font-family: Raleway;
 }
.contactTitle{
	display: inline-block;
	padding: 18px 40px 18px 40px;
	font-size:20px;
	width: 100%;
	}
.contactDesc{
	display:none;
	font-size:23px;
	padding: 40px 0 0px 0;
	font-family: Raleway-Regular;
	}
.ContactAddressHeading p,.currentOpening{
	width: 960px;
	margin: 0 auto;
	font-size: 30px;
	font-weight: bold;
	color:#000000;
	padding: 38px 0px 0px 0;
	text-align: center;
 } 
  
.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
} 
.container-fluid{
	/*padding:0 !important;*/
} 
.officeAddress .purple{
  background:#663399;
  color:#ffffff;
}
.contentWidth .purple,.contentWidth .purple p{color:#ffffff;}
.purple .glyphicon{
	color:#5d218b;
}
.grey{
  background:#f7f7f7;
  color:#6c2a9f;
}
.grey .glyphicon{color:#e2dfdf;}
.purple .row-1-col-1,.purple .row-1-col-1-right,.purple .col-email a,.purple p{
	color:#ffffff;
}
.grey .col-email a{
	color:#000000;
}
.contactTitle.purple{
	color:#ffffff;
}
.contactTitle h3{
  display: inline;
  font-size: 20px;
  font-family: Raleway-Medium;
}

.contactTitle .glyphicon{float: right;top: 6px;} 
.form_image{
    width: 960px;
    margin: 0 auto;
	margin-top: 85px;
}
.form_image img{
	width: 960px;
	height: auto; 
}
#ContactAddressHeading {	margin-bottom: 55px;}
#contact{ margin-bottom: 60px;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}
.contactDesc {display: none;font-size: 18px; min-height:100px;}
.col-img { margin-bottom:10px; }
.row-1-col-1 { float:left; padding: 0px 0 0px 70px;}
.row-1-col-1-right { min-height: 250px;float:right; padding: 0px 40px 0px 0;}
.addressImg{float:left;}
.col-address,.col-tele,.col-email{padding-left: 15px;float:left;font-size: 14px;}
.col-address span{font-family: Raleway-SemiBold;font-size: 14px;}
.address, .tele , .email{display:inline-block;font-size: 14px;}
.row-1-col-1-right .tele{
	width: 100%;
}
.address{padding-bottom: 5px;}
.grey .row-1-col-1,.grey .row-1-col-1-right,.grey .row-1-col-1 p,.grey .row-1-col-1-right p{color:#000000;}
.col-email p,.col-email div,.col-tele p,.col-tele div{display:inline;}
.contactDesc  .views-row{padding-bottom:40px;}
.col-address div p {font-size: 14px;font-family: Raleway-Regular;margin: 0 0 1px;}
.officeAddress:last-child {margin-bottom: 60px;}
#contact .view-content{
	margin-bottom: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contact">
	<div class="view view-contact view-id-contact view-display-id-block view-dom-id-4a9293a6aa6b278d4666989fe61a9db4">
		<div class="view-content row">
			<div class="officeAddress ">
				<div class="contactTitle colorme col-sm-12 col-md-12 active purple">
					<h3>Chennai -India</h3>
					<span class="glyphicon glyphicon-triangle-right rotate"></span>
				</div>
				<div class="contactDesc col-sm-12 col-md-12 colorme active grey" style="display: block;">
					<div class="col-sm-6 col-md-6 row-1-col-1 views-row views-row-1 views-row-odd views-row-first">
						<div class="address">
                         desc
                        </div>
						<div class="tele"></div>
						<div class="contactMail"></div>
					</div>
				</div>
			</div>
			<div class="officeAddress ">
				<div class="contactTitle colorme col-sm-12 col-md-12 purple">
					<h3>Hyderabad - India</h3>
					<span class="glyphicon glyphicon-triangle-right"></span>
				</div>
				<div class="contactDesc col-sm-12 col-md-12 colorme" style="display: none;">
					<div class="col-sm-6 col-md-6 row-1-col-1 views-row views-row-1 views-row-odd views-row-first views-row-last">
						<div class="address">
						  desc
						</div>
						<div class="tele"></div>
						<div class="contactMail"></div>
					</div>
				</div>
			</div>
			<div class="officeAddress ">
				<div class="contactTitle colorme col-sm-12 col-md-12 grey">
					<h3>Gurgaon -India</h3>
					<span class="glyphicon glyphicon-triangle-right"></span>
				</div>
				<div class="contactDesc col-sm-12 col-md-12 colorme" style="display: none;">
					<div class="col-sm-6 col-md-6 row-1-col-1 views-row views-row-1 views-row-odd views-row-first views-row-last">
						<div class="address">
							desc
						</div>
						<div class="tele"></div>
						<div class="contactMail"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Answer 1

I made following change in your script. Please check the Fiddle

jQuery(document).ready(function($) {
    $('.view-content .contactDesc:first').css('display','block');
    $('.view-content .contactTitle:first , .view-content .contactDesc:first').addClass('active');
    $('.view-content .contactTitle:first .glyphicon').addClass('rotate');
    $('.officeAddress .colorme:visible:odd').addClass('grey');
    $('.officeAddress .colorme:visible:even').addClass('purple');
    $('.contactTitle').click(function(){ 
          if(!$(this).hasClass('active')){
            $('.contactTitle .glyphicon ').removeClass('rotate');
            $(this).find('span.glyphicon').toggleClass('rotate');
            $('.contactDesc').slideUp();
            $('.contactTitle').removeClass('active');
            $('.contactDesc').removeClass('active');
            $(this).next('.contactDesc').addClass('active');
            $(this).next('.contactDesc').slideDown(function(){
              $('.officeAddress .colorme').removeClass('grey').removeClass('purple');
              $('.officeAddress .colorme:odd').addClass('grey');
              $('.officeAddress .colorme:even').addClass('purple');
            });
            $(this).addClass('active');
          } 
     });
});

活性细胞的手风琴颜色变化

1 个答案: