jQuery 아코디언은 항상 각 div에 표를 표시해야합니다.

상위 h3 요소를 클릭하면 아코디언 스타일 메뉴를 사용하여 다음 div 영역을 토글합니다.jQuery 아코디언은 항상 각 div에 표를 표시해야합니다.

$(document).ready(function() { 
    $('div.accordian-content> div').hide(); 
    $('div.accordian-content> h3').click(function() { 
    $(this).next('div').slideToggle('medium') 
    .siblings('div:visible').slideUp('medium'); 
}); 
});

이 코드는 다음 구조로 잘 작동합니다.

<div class='accordian-content'> 
<h3>Some title</h3> 
<div>content to be toggled</div> 
</div>

문제는 내가 H3와 다음 DIV 사이에서 테이블을 사용하기 위해 노력하고있어 나는 테이블은 항상 표시하고 싶지만, 당신이 거기에 테이블을 둘 때 부모 H3 휴식을 전환한다는 것입니다 .

<div class='accordian-content'> 
<h3>Covers </h3> 
<table id='covers'>Table content </table> 
    <div>Ajax content</div> 
</div>

나는이 어리석은 일에 많은 시간을 할애했기 때문에 조언을 주시면 감사하겠습니다.

출처

2011-08-24 Deac Karns

jQuery 코드의 끝에 다른 닫는'});'을 추가하는 것을 잊었다. 복사 - 붙여 넣기 오류라고 가정합니다. – Blazemonger

복사 붙여 넣기 오류가 맞습니다. –

이어야하며 next('div')은 nextAll('div')으로 바꿔야합니다. http://jsfiddle.net/VJCV9/

출처

2011-08-24 13:23:48 Blazemonger

은 거의 작동하지만 숨기기 전에 다음 div를 모두 보여 주므로 최종 사용자에게는 매우 이상하게 보입니다. –

그게 당신의 코드가 지시하는 것입니다. 적절한 경우'slideToggle()'과'slideUp()'을'hide()'로 바꾸거나 스타일 시트의 div에'display : none'을 설정하십시오. – Blazemonger

나는 그것에 대해별로 행운이 없다. 나는 앞에서 언급 한 두 개의 코드 블록 모두가 accordian-content div 안에 존재한다고 생각한다. 내가 분명히하자. 표가있는 섹션은 셀에 이미지 버튼을 사용하여 다음 div에 내용을 채 웁니다. 테이블이없는 div 섹션에는 정적 HTML 콘텐츠가 있습니다. 두 가지 방법을 결합하면 테이블이 포함 된 영역의 기능이 중단됩니다. –

표에서 알 수 있듯이 slideUp()도없고 </div be </div>이어야합니까? $(this).next('div')은 .next(table).children(div)

출처

2011-08-24 13:18:09 benhowdle89

jQuery 아코디언은 항상 각 div에 표를 표시해야합니다.

답변

관련 문제