我在 wordpress 中获得了一个正在开发的 CMS 站点。我现在正在学习 html、css、php、jquery、ajax 并且当然在 wordpress 上进行研究。
所以我的网站应该看起来像这样
现在在这个
只显示一页...主页
我在 wordpress 中创建了 3 个页面（关于、主页、人员）（Wordpress--->Pages---->new page--->write content）
1）在如图所示的主页中，我想要 3 个面板（关于、主页、人员），当主页页面打开时，所有这些面板都折叠起来
2）但是一旦点击主页，它应该展开主页面板并在那里显示页面内容而不重新加载页面。其他面板应该同时折叠。
3）单击菜单栏项（关于或任何其他）时，同名面板应展开..
如果有任何人们知道的网站会以某种方式回答我的问题，请转发。
编辑1
我从网站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>
但它显示为纯文本，没有手风琴标签
编辑2
function{
$(function() {
$( "#accordion" ).accordion({
collapsible: true
});
})};
编辑3
jQuery(document).ready(function(){
$(function() {
$( "#accordion" ).accordion({
collapsible: true
});
});