wordpress展开折叠页面

Question

我在wordpress中获得了一个正在开发的CMS网站。我现在正在学习html，css，php，jquery，ajax和当然正在研究wordpress ..

所以我的网站应该看起来像这样

现在就在这个

只显示一个页面... 主页

我在wordpress中创建了3页（关于，家庭，人）（Wordpress ---＆gt; Pages ----＆gt; new page ---＆gt; write content）

1）在主页面中，如图所示，我想要3个面板（关于，家庭，人物），当主页页面打开时，所有这些面板都会折叠

2）但是一旦点击Home，它应该展开主页面板并在那里显示页面内容而不重新加载页面。其他面板应该同时崩溃。

3）单击菜单栏项目（关于或任何其他）时，具有相同名称的面板应展开..

如果有人知道会以某种方式回答我的查询的网站，请传递它们。

EDIT1

我从网站http://jqueryui.com/download

下载了jquery示例

我希望标签符合collapsible.html示例

现在下面的代码是page.php

      <?php wp_enqueue_script("jquery"); // added this line  16-7-2012
?>

    <script type="text/javascript" src="<?php bloginfo('template_directory');          ?>/js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.ui.core.js"></script>
   <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.ui.widget.js"></script>
  <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/query.ui.accordion.js"></script>

   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>/js/demos.css" type="text/css" media="screen" />
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url');  ?>/js/jquery.ui.all.css" type="text/css" media="screen" />



<script>
$(function() {
    $( "#accordion" ).accordion({
        collapsible: true
    });
});
</script>


   <?php get_header(); ?>

<div class="content">

<?php if (have_posts()) : ?>

    <?php $page_id=1332;?>
<?php get_page( $page_id ) ?> 

    <?php while (have_posts()) : the_post(); ?>

        <h1><?php the_title(); ?></h1>

        <?php the_content('Read more'); ?>



    <?php endwhile; ?>
</div>

<?php else : ?>

    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something that isn't here.</p>
    <?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>

 <?php if (is_single()) comments_template(); ?>

</div>

 <?php get_sidebar(); ?>

<?php get_footer(); ?>

因为它加载了所有页面.. 在WP页面（内容部分）中，我编写了jquery示例中给出的html代码，即下面的代码：

  <div id="accordion">
  <h3><a href="#">Section 1</a></h3>
   <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
  <h3><a href="#">Section 2</a></h3>
  <div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
</div>
  <h3><a href="#">Section 3</a></h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
    <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
    </ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>

但它显示为纯文本，没有手风琴标签

EDIT2

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

EDIT3

   jQuery(document).ready(function(){   
  $(function() {
    $( "#accordion" ).accordion({
        collapsible: true
    });
});

Answer 1

至于可折叠部分，你可以使用jquery ui手风琴： http://jqueryui.com/demos/accordion/

最简单的方法是使用ajax并只在主页面中呈现所有页面。 请参阅http://codex.wordpress.org/Function_Reference/get_page和wordpress: How can I display multiple pages on one page?

您只需修改主题中的index.php文件即可。

-

您还可以通过ajax加载页面内容，如下所述： jQuery Accordion and loading content through AJAX

为此，您还需要修改page.php模板以仅显示内容，而不显示页眉/页脚。