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

【问题标题】：Whats wrong with this toggle function?这个切换功能有什么问题？
【发布时间】：2012-01-12 23:33:30
【问题描述】：

我在<p> 标签中有一个简单的img 标签，如果我点击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

【问题讨论】：

我不知道这是否重要，但属性应该用引号引起来。 <div class="content"></div>
@Rocket-Sorry 忘记在我引用的代码中保留实际值..
您是否希望一次只显示一个 div？
@Connum-不需要。我认为如果我同时保持所有可见性会很好看，如果它给我带来更多问题，那么我绝对不会。

标签： jquery html toggle image

【解决方案1】：

你在 if 块中有以下内容：

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

你不应该有相反的：

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

在 else 块中？

【讨论】：

@jeanreis-没什么区别。

【解决方案2】：

这段代码：

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/

【讨论】：

@Richard-我能够很好地切换，但图像没有改变这是主要问题。使用 div 切换效果很好。
对于切换功能，这一行运行良好 jQuery(this).next(".content").slideToggle(500);并且为了改变图像得到真正的头痛。
@Richard-感谢您的编辑和演示，无论如何我已经使用我发布的解决方案。

【解决方案3】：

我终于用这个解决方案成功了，就这样：

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

【讨论】：