Что не так с этой функцией переключения? - PullRequest
Новая
       14

Что не так с этой функцией переключения?

2 голосов
/ 12 января 2012

У меня есть простой тег img в теге <p>, и если я щелкаю тег img или <p>, внутренний div должен быть visible и снова. Если я щелкаю по нему, он должен hidediv.

Я получаю, что это работает в первый раз, но если я нажимаю тег 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>

Вот мой скрипка

Ответы [ 3 ]

2 голосов
/ 12 января 2012

У вас есть следующее в блоке if: 

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

Разве у вас не должно быть обратного: 

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

в блоке else?

1 голос
/ 12 января 2012

Я, наконец, преуспел с этим решением, и вот оно: 

<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>
1 голос
/ 12 января 2012

Этот код: 

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/

...