jQuery UI 아코디언 정렬 목록에

일부 jQuery UI 구성 요소를 사용자 문서 용으로 회사의 html 출력에 통합하려고합니다. 나는 자바 스크립트에 대한 경험이 거의 없다. 나는 아코디언을 테이블 행에 사용할 수있게되었지만 이제는 하위 단계를 확장 및 축소하여 순서가 지정된 목록 내에서 정렬 된 목록을 만들지 만 작동시키지는 못합니다. 대답은 간단하지만 미안 해요. 제발 도와주세요! http://api.jqueryui.com/accordion/jQuery UI 아코디언 정렬 목록에

곧, 각 분야의 헤더 <h> 태그와 귀하의 경우에 <div>의 내용에 포장해야합니다 아코디언 작동하려면

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI Accordion - Collapse content</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script> 
$(function() { 
$(".sub li:not(.accordion)").hide(); 
$(".sub li:first-child").show(); 

$(".sub li.accordion").click(function(){ 
    $(this).nextAll("li").fadeToggle(500); 
}).eq(0).trigger('click'); 
}); 
</script> 
</head> 
<body> 
    <ol class="sub"> 
      <li class="accordion">Section 1</li> 
      <ol> 
      <li>Description</li> 
      <li>This is text within section 1.</li> 
      </ol> 
      <li class="accordion">Section 2</li> 
      <ol> 
       <li>Description</li> 
       <li>This is text within section 2.</li> 
      </ol> 
    </ol> 
</body> 
</html>

출처

2014-02-24 ernstja

처음에는 "섹션 1"과 "섹션 2"만 표시되고, 각 섹션을 클릭하면 하위 프로세스가 표시됩니까? –

예, 제가보기에는 좋지 않지만 섹션 1이나 섹션 2를 클릭하면 그 아래에 정렬 된 목록이 표시됩니다. 1. 제 1 항을 나타내야하고 설명과 2.이 내용은 제 1 항 내의 텍스트입니다. – ernstja

당신은 순서대로 올바른 페이지의 마크 업이 필요합니다 :

: 지금

<ol class="sub"> 
    <li class="accordion"> 
     <h3>Section 1</h3> 
     <div> 
      <ol> 
       <li>Description</li> 
       <li>This is text within section 1.</li> 
      </ol> 
     </div> 
    </li> 
    <li class="accordion"> 
     <h3>Section 2</h3> 
     <div> 
      <ol> 
       <li>Description</li> 
       <li>This is text within section 2.</li> 
      </ol> 
     </div> 
    </li> 
</ol>

그리고 단지 주요 <ol>가 아코디언이라고 JQuery와 이야기

$(".sub").accordion()

JSFiddle here.

출처

2014-02-25 00:42:21

그래도 주문 목록 헤더에 숫자가 표시되도록하려면 어떻게해야합니까? – ernstja

그들은 요소에'.accordion()'을 적용하면 추가 된 CSS 클래스에 의해 제거됩니다. 다시 되돌리려면 CSS에'list-style-type'과'padding' 속성을 오버라이드하지 말아야합니다. 이렇게하려면 다음 CSS 규칙을'.sub' 클래스에 추가하십시오 : '.sub {list-style-type : decimal! important; padding-left : 40px! important}' 그러나 머리글에 숫자를 수동으로 추가하는 것이 좋습니다. –

답변

관련 문제