Question

此切换功能怎么了？

2012-01-12

1177

jquery html toggle image

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

这是我的小提琴

Answer 1

在 if 块中，您有以下内容：

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

难道您不应该在 else 块中写上相反的内容：

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

吗？

Answer 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');
}

您隐藏了 active 类，然后将 active 重新添加到其中，这导致了问题。

如果您不介意一次扩展多个，那么代码可以非常简单：

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

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

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

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