這個切換功能有什麼問題？

我有<p>標籤內的簡單img標籤，如果我點擊IMG或<p>標籤內div應該visible又一次如果我點擊它，它應該hide股利。這個切換功能有什麼問題？

我第一次得到它的工作，但如果我點擊img或<P>標籤第二次圖像dosent變化。

我不想<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>

這是我如何顯示它：

<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

來源

2012-01-12 coder

我不知道它是否重要，但屬性應該在引號中。 '

' – 2012-01-12 14:36:44

@ Rocket-對不起，忘了在代碼中保留這個實際的引號.. – coder 2012-01-12 14:38:02

你是否只希望其中一個div一次可見？ – Connum 2012-01-12 14:40:08

此代碼：

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/

來源

2012-01-12 14:43:10

@理查德 - 我能夠很好地進行切換，但圖像沒有改變，這是主要問題。與div一起工作的很好。 – coder 2012-01-12 14:45:27

對於切換功能，這一行運行良好jQuery（this）.next（「。content」）。slideToggle（500）;併爲chnaging的形象得到真正的頭痛。 – coder 2012-01-12 14:49:26

@Kiran請參閱我的編輯 – 2012-01-12 14:59:04

您已在if塊如下：

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

不應該你有相反的：

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

in else block？

來源

2012-01-12 14:42:23 jeanreis

@ jeanreis-它沒有區別。 – coder 2012-01-12 14:43:45

我有這個解決方案終於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>

來源

2012-01-12 15:01:35 coder

這個切換功能有什麼問題？

回答

相關問題