このトグル機能で何が問題になりますか？

Question

は私が<p>タグ内で簡単なimgタグを持っていると私は、IMGや<p>タグをクリックすると、内側divはvisibleでなければならないと私はそれをクリックすると、再び、それはdiv要素をhide必要があります。

私はそれが最初に働くようになっていますが、imgまたは<P>タグをクリックすると画像の量が変わります。

<p>の背景イメージを変更したいのですが、私はimgタグのためにそれが必要です。

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery(".content").hide(); 
     //toggle the componenet with class msg_body 
     jQuery(".heading").click(function() { 
      var $this = $(this), 
      $contentArea = $this.next('.content'); 

      if (!$contentArea.hasClass('active')) { 
       $this.find('img').attr("src", "img/Minus.png"); 
       $(".content.active").slideToggle(500).removeClass('active'); 
       $contentArea.slideToggle(500).addClass("active"); 
      } 
      else if ($contentArea.hasClass('active')) { 
       $this.find('img').attr("src", "img/Plus.png"); 
       $(".content.active").slideToggle(500).addClass('active'); 
      } 
     }); 
    }); 
</script> 

これは私がそれを示しています方法です：

$contentArea.slideToggle(500).addClass("active"); 

はないはずです。ここで

<div class="layer1"> 
    <p class="heading"><img src="img/Plus.png" alt="" style="margin:0 5px 0 0;" /></p> 
    <div class="content"></div> 
    <p class="heading"><img src="img/Plus.png" alt="" style="margin:0 5px 0 0;" /></p> 
    <div class="content"></div> 
    <p class="heading"><img src="img/Plus.png" alt="" style="margin:0 5px 0 0;" /></p> 
    <div class="content"></div> 
    <p class="heading"><img src="img/Plus.png" alt="" style="margin:0 5px 0 0;" /></p> 
    <div class="content"></div> 
</div> 

は、あなたがもしブロック内で、次のしている私のfiddle

Answer 1

このコード：

else if ($contentArea.hasClass('active')) { 
    $this.find('img').attr("src", "img/Plus.png"); 
    $(".content.active").slideToggle(500).addClass('active'); 
} 

は次のようになります。

else if ($contentArea.hasClass('active')) { 
    $this.find('img').attr("src", "img/Plus.png"); 
    $(".content.active").slideToggle(500).removeClass('active'); 
} 

あなたはアクティブなクラスを非表示にして、問題を引き起こしたことに戻ってアクティブ追加されました。

一度に展開される複数の気にしない場合、コードは非常に単純なことができます：

jQuery(".heading").click(function() {  
    $('img.plus, img.minus', this).toggle(); 

    $(this).next('.content') 
     .slideToggle(500);   
}); 

http://jsfiddle.net/infernalbadger/PCgZy/3/

Answer 2

ですあなたはその逆を持っています：

$contentArea.slideToggle(500).removeClass("active"); 

elseブロックには、

Answer 3

私は、このソリューションでようやくsuceededていると、ここでそれが行きます：

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery(".content").hide(); 
     //toggle the componenet with class msg_body 
     jQuery(".heading").click(function() { 
      var $this = $(this), 
      $contentArea = $this.next('.content'); 

      if (!$contentArea.hasClass('active')) { 
       $this.find('img').attr("src", "img/Minus.png"); 
       $contentArea.slideToggle(500).addClass("active"); 
      } 
      else if ($contentArea.hasClass('active')) { 
       $this.find('img').attr("src", "img/Plus.png"); 
       $contentArea.slideToggle(500).removeClass("active"); 
      } 
     }); 
    }); 
</script>