javascript手风琴/css工作不正常

我有一个博客页面，我必须使用accordionjquery在上面列出文章。我设法让它工作，但它没有正确地呈现，更准确地说：页面的高度并没有相应地随着文章的大小而放大。你可以在这里看到：

我认为这更像是一个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>

---

完整的accordion jQuery可以在这里找到：

在

jQuery.vaccordion.js

中，accordion元素的高度和扩展的accordion项目的高度正在明确设置：

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

因此，元素太小，无法容纳帖子内容。您可以尝试删除这些线或将其高度设置为“自动”

编辑

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

在我看来，默认情况下，手风琴应该处理这种行为[]。所以我不知道为什么它没有显示第一个元素。无论如何，您可以通过CSS解决此问题：

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

JSFIDLE示例：

$（文档）.ready（函数（）{
$（'.va slice'）。单击（函数（）{
var index_div=$（this.index（）；
//控制台日志（索引分区）；
变量元素=$（'.va slice'）.eq（索引div）；
//控制台日志（元素）；
//var getHeight=element.height（）；
//console.log（getHeight）；
log（element.attr（'style'，''）；
log（element.addClass（'explicit_va'）；
}); 
});

---

更多信息：

在

jquery.vacordion.js

中尝试将

accordionH

（第300行）和

expandedHeight

（第305行）的高度更改为

auto

（分别为

450

/

350

）

auto

没有做任何事情，脚本停止工作。现在我正在考虑添加一个固定高度和一个垂直滚动条。如果完全删除这些行（300/305），会发生什么情况？是的，这很有效。谢谢我真的很感谢您的帮助。没问题-我已经添加了它作为您的答案-实际上它只需将显式值替换为

“auto”

-就像您所说的那样。再次感谢@乔治格里戈里塔-谢谢，我已经更新了我的答案。我还添加了一些关于在页面加载时显示第一个元素的信息。感谢您的回答，但之前用户的解决方案更简单（至少我能理解）：）

    .explicit_va{
        min-height:0px !important;
        height:100% !important;
        }

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

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

<script>
$(document).ready(function() {
            $('.va-slice').click(function(){
                var index_div = $(this).index();
                //console.log(index_div);

                var element = $('.va-slice').eq(index_div);
                //console.log(element);
                //var getHeight = element.height();
                //console.log(getHeight);

                console.log(element.attr('style', ''));         
                console.log(element.addClass('explicit_va'));

            }); 
});
</script>