2013-10-03 2 views
1

안녕하세요, 내가 쇼와 숨김에 대한 코드를 남겨두고 있습니다. 하지만 내 브라우저에서는 이미지가 플러스 또는 마이너스가 아닙니다.JQuery show/hide 또는 이미지로 전환 +/-

$(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 코드입니다. 이것은 내가 JSFIDDLE에있는 것입니다)

,

<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> 

그래서 내가 말해 줄 수 잘못 사람들 뭐하는 거지.

+0

변경'$ (이) .children ('#bericht')'찾으십시오. ('. berichtui') '. 또한, 당신은 ID를 선택하려고하면 잘못된 HTML 및 모든 문제를 일으킬 것입니다 모든 중복 ID를 제거 할 수도 있습니다. 그것이 두 번 이상 사용되면, 그것을 수업으로 만드십시오. –

답변

2

현재 문서에만 준비 이벤트가 있지만 창에는 표시되지 않습니다.
소스를 설정하는 마지막 코드 줄에서 this이 창 개체입니까?
ID box-ui은 두 번 사용되므로 다른 ID도 일부 사용됩니까?
애니메이션 메서드의 속도를 인용하지 마십시오.
또한 화살표 이미지를 배경으로 설정했습니다. `$ (이) .closest ('섹션')에

$(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

+0

+1 기술적으로 먼저 대답했기 때문에 먼저 게시했지만 완료되지 않았으므로 삭제되었습니다. 다시 게시되었습니다. 나는 OP도 언급했다. – PSL

+0

두 사람 모두 잘 작동합니다. – Drokz

관련 문제