jquery - 如何只更新点击元素的样式

Question

HTML:

<div class="expHdr blueBG brClear" title="wer">
    <span><img src="theImages/arrow_right.png" id="imgType" /></span>
    wer
</div>
<div class="expCont hidContent">
    <tfText01>wer</tfText01>
</div>

<div class="expHdr blueBG brClear" title="234">
    <span><img src="theImages/arrow_right.png" id="imgType" /></span>
    234
</div>
<div class="expCont hidContent">
    <tfText02>werewr</tfText02>
</div>

JSFiddle:http://jsfiddle.net/sikni8/rz7e2a0h/1/

我如何修改 CSS/JQuery/HTML 以确保蓝色标题仅针对单击的元素和图像发生变化。

Answer 1

改变你jquery中的一行

$content.is(":visible") ？ $header.removeClass("blueBG").addClass("orangeBG") : $header.removeClass("orangeBG").addClass("blueBG");

要解决图像问题，请将上面的行替换为:

$content.is(":visible") ? $header.find('img').attr('src', 'theImages/arrow_down.png') :  $header.find('img').attr("src", "theImages/arrow_right.png");