这个切换功能有什么问题？

我有<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

这个切换功能有什么问题？

回答

相关问题