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

Question

即使激活后，我也有可选颜色的手风琴。现在我想要改变活动细胞的相同颜色。现在我想要保持活动标题为紫色，而活动desc为灰色颜色。

现在正常工作的紫色标题与灰色desc但灰色标题需要更改puprle颜色和desc灰色。

例如：如果我点击奈，奈 - 印度的标题是紫色的颜色和它的递减是grwy hydrabad - 印度也是紫色和gurgon - 印度是紫色的（现在的工作）

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

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

jQuery(document).ready(function($) { 
 
$('.view-content .contactDesc:first').css('display','block'); 
 
\t $('.view-content .contactTitle:first , .view-content .contactDesc:first').addClass('active'); 
 
\t $('.view-content .contactTitle:first .glyphicon').addClass('rotate'); 
 
\t $('.officeAddress .colorme:visible:odd').addClass('grey'); 
 
    $('.officeAddress .colorme:visible:even').addClass('purple'); 
 
    $('.contactTitle').click(function(){ 
 
    if(!$(this).hasClass('active')){ 
 
\t $('.contactTitle .glyphicon ').removeClass('rotate'); 
 
\t $(this).find('span.glyphicon').toggleClass('rotate'); 
 
     $('.contactDesc').slideUp(); 
 
     $('.contactTitle').removeClass('active'); 
 
\t $('.contactDesc').removeClass('active'); 
 
\t $(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{ 
 
\t display: inline-block; 
 
\t padding: 18px 40px 18px 40px; 
 
\t font-size:20px; 
 
\t width: 100%; 
 
\t } 
 
.contactDesc{ 
 
\t display:none; 
 
\t font-size:23px; 
 
\t padding: 40px 0 0px 0; 
 
\t font-family: Raleway-Regular; 
 
\t } 
 
.ContactAddressHeading p,.currentOpening{ 
 
\t width: 960px; 
 
\t margin: 0 auto; 
 
\t font-size: 30px; 
 
\t font-weight: bold; 
 
\t color:#000000; 
 
\t padding: 38px 0px 0px 0; 
 
\t 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{ 
 
\t /*padding:0 !important;*/ 
 
} 
 
.officeAddress .purple{ 
 
    background:#663399; 
 
    color:#ffffff; 
 
} 
 
.contentWidth .purple,.contentWidth .purple p{color:#ffffff;} 
 
.purple .glyphicon{ 
 
\t 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{ 
 
\t color:#ffffff; 
 
} 
 
.grey .col-email a{ 
 
\t color:#000000; 
 
} 
 
.contactTitle.purple{ 
 
\t 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; 
 
\t margin-top: 85px; 
 
} 
 
.form_image img{ 
 
\t width: 960px; 
 
\t height: auto; 
 
} 
 
#ContactAddressHeading { \t 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{ 
 
\t 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{ 
 
\t margin-bottom: 60px; 
 
}

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

Answer 1

我做了以下脚本中的变化。请检查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'); 
      } 
    }); 
});