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块中有以下内容：

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

你不应该反过来：

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

在else块中？

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

您正在隐藏活动类，然后将活动类添加到其上，这导致了问题。

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

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>

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

3 个答案: