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");

Answer 2

您需要使用$(this)获取相对标头。所以，试试这个：

  $content.is(":visible") ? 
       $(this).prev().removeClass("blueBG").addClass("orangeBG") : 
       $(this).prev().removeClass("orangeBG").addClass("blueBG");

而不是：

  $content.is(":visible") ? 
       $(".expHdr").removeClass("blueBG").addClass("orangeBG") : 
       $(".expHdr").removeClass("orangeBG").addClass("blueBG");

DEMO：https://jsfiddle.net/rz7e2a0h/7/

Answer 3

在代码中使用$ header目标元素this：

$(".expHdr").click(function () {
    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        $content.is(":visible") ? $header.find("#imgType").attr('src', 'theImages/arrow_down.png') : $header.find("#imgType").attr("src", "theImages/arrow_right.png");
        $content.is(":visible") ? $header.removeClass("blueBG").addClass("orangeBG") : $header.removeClass("orangeBG").addClass("blueBG");
    });
});

如何仅更新单击元素的样式

3 个答案: