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

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

1 个答案: