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

Question

我有一个简单的img标签 <p>标签，如果我单击 img 或 <p>标记内部div应该是visible再次如果我点击它，它应该 hide该div。

我是第一次让它工作，但是如果我单击 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>

这就是我展示它的方式:

<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

if block 中有以下内容:

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

你不应该有相反的情况吗:

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

在 else block 中？