올바른 위치에 JQuery UI accordion div가 없습니다.

Question

F.A.Q.를 표시하고 싶습니다. Jquery UI 아코디언을 사용하는 페이지입니다. 몇 개의 단락 (FAQ 제목)이 있으며 각각에는 일련의 질문과 답변이 포함되어 있습니다. 우선 FAQ 제목 목록을 표시합니다. 그 중 하나를 클릭하면 관련 그룹의 질문과 답변이 아코디언 스타일로 나타납니다. 유일한 문제는 아코디언 div가 FAQ 제목의 전체 목록 아래에 아래 이미지와 같이 표시되지만 각 이미지를 표시하고 싶다는 것입니다. 관련 FAQ 제목 아래 accordion div. 제발 내 코드를 확인하시기 바랍니다. 당신은 당신의 루프에서 아코디언의 내용 요소를 포함하지 않는

$(document).ready(function() { 

    $("#accordion").accordion({ 
     collapsible: true 
    }); 

    $(".faq_title").click(function() { 
     var title = $(this).text(); 

     $.post('cont/get_data', { 
      title: title 
     }, function (data) { 

      var my_obj = data; 
      $.each(my_obj, function (i) { 

       var question = my_obj[i].faq_question; 
       var answer = my_obj[i].faq_answer; 

       var dynaContent = "<h3><a href='#' class='question'>" + question + "</a></h3>" + 
        "<div class='answer'>" + answer + "</div>"; 

       $("#accordion").append(dynaContent); 
       $('#accordion').accordion("refresh"); 
      }); 
     }, "json"); 

     $("#accordion").html(""); 
    }); 
}); 

Answer 1

:

여기 여기 내 JS 파일입니다 내보기

<div class="abc"> 
    <?php echo $message; foreach($results as $row){ $faq_title=$ row->faq_title; ?> 
    <h3><a href="#" class="faq_title"><?php echo $faq_title; ?></a></h3> 

    <?php }?> 
    <div id="accordion"></div> 
</div> 

입니다. 요소에 대한 문서 호출이 각 제목 아래에 존재 : 귀하의 경우

<div id="accordion"> 
    <h3>First header</h3> 
    <div>First content panel</div> 

    <h3>Second header</h3> 
    <div>Second content panel</div> 
</div> 

, 그것은 다음과 같습니다

<div class="abc"> 
    <?php echo $message; foreach($results as $row){ $faq_title=$ row->faq_title; ?> 
    <h3><a href="#" class="faq_title"><?php echo $faq_title; ?></a></h3> 

    <div class="content-panel"></div> 
    <?php }?> 
</div> 

당신은 또한 DOM 통과를 대신 사용하도록 jQuery를 수정해야 할 것 ID 타겟팅 :

$(this).next('.content-panel').html(dynaContent); 

중복 ID 시나리오가 잘못 될 수있는 클래스가 아닌 ID를 사용해야합니다.