JQuery 显示/隐藏或切换图像 + / -

Question

大家好，我有显示和隐藏的闲置代码。 但在我的浏览器中，有 nu 正负图像。

$(window).ready(function() {
      $('header').click(function() {
        var text = $(this).children(' #bericht');

        if (text.is(':hidden')) {
            text.slideDown('200');
            $('img', this).attr('src', 'images/icons/up.png').show(200);        
        } else {
            text.slideUp('200');
            $('img', this).attr('src', 'images/icons/down.png').show(200);      
        }

    });

    $('img', this).attr('src', 'images/icons/up.png').show(200);

  });
});

这是我的 html 代码。

<section id="box-ui">
    <header class="head-title">Test kopje<img class="toggle"  src="images/icons/up.png" /></header>
    <div id="bericht" class="berichtui">
    <a href="#">Beetje tekst hier maar....?</a><br>
    Beetje tekst hier maar....?<br>
    Beetje tekst hier maar....?<br>
    Beetje tekst hier maar....?<br>
    Beetje tekst hier maar....?</div>
</section>

<section id="box-ui">
    <header class="head-title">Test kopje<img class="toggle"  src="images/icons/up.png" /></header>
    <div class="berichtui">
    Beetje tekst hier maar....?<br>
    Beetje tekst hier maar....?<br>
    Beetje tekst hier maar....?<br>
    Beetje tekst hier maar....?<br>
    Beetje tekst hier maar....?</div>
</section>

那么我做错了什么可以告诉我的人;）

这就是我在JSFIDDLE 上的内容。

Answer 1

只有当前文档有就绪事件，窗口没有。
在您设置源的最后一行代码中，this 是窗口对象？
ID box-ui 被使用了两次，其他一些 ID 也是如此？
不要引用动画方法的速度。
您还将箭头图像设置为背景。

$(document).ready(function () {
    $('header').on('click', function () {
        var section = $(this).closest('section'),
            text    = section.find('.berichtui'), // use classes, not ID
            img     = $(this).find('img'),
            state   = text.is(':hidden');

        text[state?'slideDown':'slideUp'](200);
        img.prop('src', function() {
            return state ? 'images/icons/up.png' : 'images/icons/down.png';
        });
    });

    $('.box-ui img').show(200);
});

FIDDLE