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