javascript accordion / CSS无法正常工作 _jquery-ui-accordion

我有一个博客页面, 必须在其中使用accordion jQuery列出帖子。我设法使其正常工作, 但无法正确呈现, 更准确地说：页面的高度没有根据帖子的大小相应地放大。你可以在这里看到它：http://melisayavas.com/web/?page_id=22
我认为这比jQuery更像是CSS问题, 不幸的是, 我对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
#1在jquery.vaccordion.js中, accordion 元素的高度和扩展的accordion 项目的高度被明确设置为：

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

因此, 元素太小而无法容纳帖子内容。你可以尝试删除这些线, 也可以将其高度设置为” 自动” 。
编辑
回答你的其他评论” 有人知道如何在页面加载时使第一个元素自动扩展吗？”
在我看来, accordion 应默认处理此行为[请参阅accordion 演示]。所以我不确定为什么它没有显示第一个元素。无论如何, 你可以通过CSS解决此问题：

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

JSFiddle示例：http://jsfiddle.net/mcDeE/
#2

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

应用脚本, 在该元素上添加一个类’ explicit_va’

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

< 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>

【javascript accordion / CSS无法正常工作】更多内容：http://source88.blogspot.com/search/label/Accordion