使用PHP和jQuery的简单faq页面

Question

I am trying to create a faq page where questions and answers are saved in arrays. When the page is loaded the user only sees the questions and whenever he clicks on a question, the answer to that question will be shown. I found some jQuery scripts online and combined it with arrays but the result is not what I expected.

Here is the code for the array part which is in a folder called "includes":

    <?php

$faqArrays=  array(
   array(
        "question" => "this is question 1",
        "answer" => "this is the answer for the first question"        
    ),
    array(
        "question" => "this is question 2",
        "answer" => "this is the answer for the 2 question"        
    ),    
    ,array(
        "question"=>"this is question 7",
        "answer"=>"this is the answer for the 7 question"        
    ) 
);        

    ?>

And here is the HTML and jQuery code:

<?php

include('includes/arrays.php');
?>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
 $(document).ready(function() {

    $('.faq_question').click(function() {

        if ($(this).parent().is('.open')){
            $(this).closest('.faq').find('.faq_answer_container').animate({'height':'0'},500);
            $(this).closest('.faq').removeClass('open');

            }else{
                var newHeight =$(this).closest('.faq').find('.faq_answer').height() +'px';
                $(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},500);
                $(this).closest('.faq').addClass('open');
            }

    });

});
</script>
<style>
/*FAQS*/
.faq_question {
    margin: 0px;
    padding: 0px 0px 5px 0px;
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
}

.faq_answer_container {
    height: 0px;
    overflow: hidden;
    padding: 0px;
}
</style>

<div class="faq_container">
   <div class="faq">
      <div class="faq_question"> <?php
        foreach($faqArrays as $faqArray){

            echo "<h1>$faqArray[question]</h1>";

        }
       ;?>
      </div>
           <div class="faq_answer_container">
              <div class="faq_answer"><?php $faqArray[answer];?></div>
           </div>        
    </div>
 </div>

Thanks,

Answer 1

I don't know what you expected, or the output of your files. That would be great if that was posted too. But nonetheless, I tried running your files, and immediately got an error in your included php file. You have a unexpected comma. Here's how it should be:

<?php
$faqArrays=  array(
array(
    "question" => "this is question 1",
    "answer" => "this is the answer for the first question"
),
array(
    "question" => "this is question 2",
    "answer" => "this is the answer for the 2 question"
),
array(
    "question"=>"this is question 7",
    "answer"=>"this is the answer for the 7 question"
)

); ?>`

Secondly, you try to make a statement on this line:

<div class="faq_answer"><?php $faqArray[answer];?></div>

But you have never specified what answer is.

You could replace that line with:

<div class="faq_answer"><?php
    foreach($faqArrays as $faqArray){

        echo "<h1>$faqArray[answer]</h1>";

    }
   ;?></div>

That should make the script running. Tested AS IS.

EDIT:

Here's one way of achiving, what I think you're trying: http://pastebin.com/dQGzpTi1