Jquery multiple show and hide - 표시되지만 다른 사람을 숨기기.

안녕하세요 저는 둘러 보았고 정확한 문제를 찾을 수없는 것 같습니다.Jquery multiple show and hide - 표시되지만 다른 사람을 숨기기.

내가 가지고있는 것은 더 많은 내용이있는 숨겨진 div를 표시하기 위해 아래로 슬라이드 할 때 버튼을 눌렀을 때 버튼이 바뀌고 다시 한번 div를 숨길 때 닫힌 것으로 바뀐다.

그러나 나는 이전 버튼을 닫고 다음 버튼을 닫아서 자신의 버튼을 열 수없는 것처럼 보입니다.

여기 내 코드입니다 :

$('#slidebtn-1').click(function() { 
    $('#slidecontent-1').slideToggle(500); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
}); 
$('#slidebtn-2').click(function() { 
    $('#slidecontent-2').slideToggle(500); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
}); 
}

HTML :

이

<div class="col"> 
    Content 
    <div id="slidecontent-1" class="hide"> 
     Hidden content goes here 
    </div> 
    <a id="slidebtn-1" class="more-btn" href="#slidecontent-1">Read more</a> 
</div> 
<div class="col"> 
    Content 
    <div id="slidecontent-2" class="hide"> 
     Hidden content goes here 
    </div> 
    <a id="slidebtn-2" class="more-btn" href="#slidecontent-2">Read more</a> 
</div>

이 어떤 도움을 크게 감상 할 수있다!

건배

출처

2012-02-09 jamie

질문에 대한 설명과 코드가 일치 할 때 약간의 실종감을 느낍니다. "# slidebtn-2"를 클릭하면 "# slidecontent-1"을 닫고 그 반대도 마찬가지입니다.

그렇다면 @ ofir-baruch의 주석이 가장 적절합니다. 일반적인 함수가 필요할 것입니다.

각 버튼은 slidDown : true 또는 그와 비슷한 콘텐츠 영역에 속성을 추가 할 수 있습니다.이 버튼 중 하나가 클릭 될 때마다 div에 현재 slidDown : true가있는 슬라이드 태그를 갖게하거나 해당 div에서 attr을 제거하고, 자체 content div에 추가하고 slideToggle 자체 div.

http://jsfiddle.net/willbuck/NvXQt/1/

신용이에 JQuery와 요소 평등 시험 : How would you compare jQuery objects?

출처

2012-02-09 16:59:10

나는 강하게 숨기기/표시 버튼과 숨겨진 콘텐츠 영역 모두에 대해 클래스를 사용하는 것이 좋습니다 것입니다. 각 버튼에 대한 이벤트 핸들러를 작성하지 않아도되지만 동일한 기능을 가진 모든 요소에 적용되는 이벤트 핸들러가 있어야합니다. 이런 식으로 뭔가 :

<div class="col"> 
    Content 
    <div id="slidecontent-1" class="hide content"> 
     Hidden content goes here 
    </div> 
    <a id="slidebtn-1" class="more-btn" href="#slidecontent-1">Read more</a> 
</div> 
<div class="col"> 
    Content 
    <div id="slidecontent-2" class="hide content"> 
     Hidden content goes here 
    </div> 
    <a id="slidebtn-2" class="more-btn" href="#slidecontent-2">Read more</a> 
</div>

그리고 이벤트 코드 : 당신이 후하고 (slidecontent1가 폐쇄되도록하려면 내가 이해에서

$('.more-btn').click(function() { 
    $('.content-open').slideToggle(500).toggleClass('content-open'); 
    $(this).parent().find('.content').slideToggle(500).toggleClass('content-open'); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
});

출처

2012-02-09 15:10:07 pharalia

감사 pharalia이 거의 I 후 나는 정확한 효과를 가지고있다, 여기에 예제와 jsFiddle에 대한 링크입니다. 클래스를 사용하는 것이 좋습니다. 왜 처음부터 사용하지 않았는지 모르겠습니다. 1 개의 섹션을 연 다음 닫기 버튼을 누르면 닫기가 전환되지만 다시 다시 열립니다. 나는 무슨 일이 일어나고 있는지 잘 모르겠다. 어떤 아이디어가 있니? – jamie

내 대답보기 제이미, 나는 그것을 시도했을 때 나는 똑같은 문제를 겪었다. 아마 내가 쓴 것보다 더 깨끗한 것을 쓸 수는 있었지만 적어도 그 일은 할 수있다. –

는 slidecontent 1과 2 의 반응이 없다 열려있는) slidecontent2가 "활성화"되었을 때 다른 슬라이드에 대한 작업을 포함해야합니다. 예를 들어 는 :

$('#slidebtn-1').click(function() { 
    $('#slidecontent-1').slideToggle(500); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
}); 
$('#slidebtn-2').click(function() { 
    $('#slidecontent-2').slideToggle(500); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    $('#slidecontent-1').slideToggle(500); 
    $('#slidecontent-1').text($('#slidecontent-1').text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
});

사실은 해당 slidecontents 토글 링하는 일반적인 기능을 사용하는 것이 더 effecient하고 다른 모든 슬라이드 닫히고이 함수 루프 (.each)에 포함한다는 것이다.

출처

2012-02-09 15:16:24

안녕하세요, Ofir이 답장을 보내 주셔서 감사합니다. 정확히 내가 처음 시도한 것, 그러나 한 번 열어 본 다음 그 하나를 닫은 다음 새로 열어 두 사람이 모두 열리게된다. 그리고 나서 하하를 어떻게해야할지 모를 것이다! – jamie

Jquery multiple show and hide - 표시되지만 다른 사람을 숨기기.

답변

관련 문제