2010-04-29 2 views
0

나는 다음과 같은 방법으로 내 아코디언 초기화하기 :아약스 JQuery와 - UI 아코디언

$(function() { 
    $("#gallery_accordion").accordion({ event: false }); 
    $("#gallery_accordion").click(function(e) { 
    var contentDiv = $(this).next("div"); 
    contentDiv.load($(this).find("a").attr("href")); 
    }); 
}); 

이 내용은 온 클릭로드를하지만, 아코디언은 보이지 않습니다. 아무것도 표시되지 않습니다. 어떤 도움을 주셔서 감사합니다.
감사합니다.

업데이트 : 높이는 '0'으로 유지됩니다. 그 이유가 뭐야? 여기

는 마크 업입니다 :

$("#gallery_accordion").accordion({ header: "h3", event : false }); 

그리고 당신의 HTML에 :

<div id="gallery_accordion"> 
    <h3><a href="javascript:getGallery('369');">My first gallery</a></h3> 
    <div id="gallery369"> 
    </div> 

    <h3><a href="javascript:getGallery('381');">The second gallery</a></h3> 
    <div id="gallery381"> 
    </div> 
</div> 
+0

당신이하기 Accordian에 대한 마크 업이 어떻게 생겼는지 포함 수 : 여기

은 아코디언을로드하는 샘플 문서입니까? – Zack

답변

0

시도는 귀하의 초기 호출을 변경

당신의 세포의
<div id="gallery_accordion"> 
<div> 
    <h3><a href="javascript:getGallery('369');">My first gallery</a></h3> 
    <div id="gallery369"> 
    </div> 
</div> 
<div> 
    <h3><a href="javascript:getGallery('381');">The second gallery</a></h3> 
    <div id="gallery381"> 
    </div> 
</div> 
</div> 

각각 가질 필요는 자신의 div 태그를 호출하고 초기 호출에서 헤더를 H3 태그로 설정했습니다.

희망이 도움이됩니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>jQuery UI Example Page</title> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/start/jquery-ui.css" rel="Stylesheet" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      $(function(){ 
       // Accordion 
       $("#gallery_accordion").accordion({ header: "h3"}); 
       $("#gallery_accordion a").click(function(evt) { 
      var galleryId = $(this).attr('href').split('#')[1]; 
      var contentDiv = $('#' + 'gallery' + galleryId); 
      if(contentDiv.html() == "&nbsp;") { 
      var galleryContent = getGallery(galleryId); 
      contentDiv.html(galleryContent); 
      } 
     }); 
       var galleryIdI = $('#gallery_accordion div div:first').attr('href').split('#')[1]; 
     var contentDivI = $('#' + 'gallery' + galleryId); 
       var galleryContentI = getGallery(galleryId); 
       contentDivI.html(galleryContentI); 
      }); 
     </script> 
    </head> 
    <body> 
    <!-- Accordion --> 
     <h2 class="demoHeaders">Accordion</h2> 
     <div id="gallery_accordion"> 
      <div> 
       <h3><a href="#369">Gallery 1</a></h3> 
       <div id="gallery369">&nbsp;</div> 
      </div> 
      <div> 
       <h3><a href="#381">Gallery 2</a></h3> 
       <div id="gallery381">&nbsp;</div> 
      </div> 
      <div> 
       <h3><a href="#392">Gallery 3</a></h3> 
       <div id="gallery392">&nbsp;</div> 
      </div> 
     </div> 
</body> 
</html> 
+0

div를 추가하고 'header : "h3"'을 init에 추가했지만 불행히도 도움이되지 않았습니다. – user329305

+0

그냥 JQuery UI css 파일과 함께 문서에서 참조하는 JQuery 및 JQuery UI js 파일을 요청해야합니다. – Paul

+0

위의 작업 코드가 추가되었으므로 도움이됩니다. – Paul