我有一个博客页面,必须在其中使用 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
最佳答案
在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/
关于javascript Accordion /CSS无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10111525/