javascript Accordion /css 无法正常工作

Question

我有一个博客页面，我必须使用 accordion jQuery 在其中列出帖子。我设法让它工作，但它没有正确呈现，更准确地说:页面的高度不会相应地放大到帖子大小。你可以在这里看到它:http://melisayavas.com/web/?page_id=22

我认为这更像是一个 CSS 问题而不是 jQuery，不幸的是我没有足够的 CSS 或 jQuery 知识来真正确定问题出在哪里以及如何解决它。

这是页面的 HTML 和 JS:

<script type="text/javascript">
        $(function() {
            $('#va-accordion').vaccordion();
        });

    </script>


<div id="va-accordion" class="va-container">
<div class="va-wrapper">
<div class="about-page">    
<?php query_posts( array ( 'category_name' => 'About', 'posts_per_page' => -1 ) ); 
?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="va-slice">
    <article class="about" id="about-<?php the_ID(); ?>">
        <div class="title"><h2><?php the_title(); ?></h2></div>
        <div class="va-content">
        <div class="entry">
            <li><?php the_content(); ?></li>
        </div>
        </div>

        <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

    </article>
    </div>
    <?php endwhile; endif; ?>

</div>
</div>
</div>

这是我使用的 CSS:

/* Vertical Accordion Style */
.va-container{
position:relative;
}
.va-wrapper{
width:100%;
height:100%;
position:relative;
overflow:hidden;
background:#000;
}
.va-slice{
cursor:pointer;
width:100%;
left:0px;
overflow:hidden;
}

.va-title{
}
.va-content{
display:none;
margin-left:25px;
}
.va-slice p{
}
.va-slice ul{
margin-top:20px;
}
.va-slice ul li{
}
.va-slice ul li a{
}
.va-slice ul li a:hover{
}

.post {
border: 2px solid;
border-radius: 10px;
clear: both; 
overflow: hidden; 
padding: 20px;
margin-top: 28px;
}

.about {
clear: both; 
overflow: hidden; 
}

.about-page {
border: 2px solid;
border-radius: 10px;
clear: both; 
overflow: hidden; 
padding: 20px;
margin-top: 28px;
}

完整的 Accordion jQuery 可以在这里找到:http://pastebin.com/hJEufLQU

Answer 1

在 jquery.vaccordion.js 中， Accordion 元素的高度和展开的 Accordion 元素的高度正在明确设置:

line 300 - accordionH : 450
... 
line 305 - expandedHeight: 350

因此，元素太小而无法容纳帖子内容。您可以尝试删除这些线或将它们的高度设置为 "auto"。

编辑

回答您的附加评论“知道如何让第一个元素在页面加载时自动展开吗？”

在我看来 Accordion 应该默认处理这种行为[ see accordion demo ].所以我不确定为什么它没有显示第一个元素。无论如何，您可以通过 CSS 解决此问题:

#va-accordion .va-slice:first-child .va-content{
    display: block;       
}

JSFiddle 示例:http://jsfiddle.net/mcDeE/