我有一个博客页面,我必须使用手风琴jQuery列出帖子.我设法让它工作,但它没有正确渲染,更确切地说:页面的高度不会相应地扩大到帖子大小.你可以在这里看到它:http://melisayavas.com/web/?page_id=22
我认为这是一个CSS问题而不是jQuery,遗憾的是我没有足够的CSS或jQuery知识来确定问题所在以及如何解决它.
这是HTML&该页面的JS:
dion" class="va-container">
PHP query_posts( array ( 'category_name' => 'About','posts_per_page' => -1 ) );
?>
PHP if (have_posts()) : while (have_posts()) : the_post(); ?>
这是我使用的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;
}
完整的手风琴jQuery可以在这里找到:http://pastebin.com/hJEufLQU
最佳答案
在jquery.vaccordion.js中,手风琴元素的高度和扩展的手风琴项目的高度设置为explicilty:
line 300 - accordionH : 450
...
line 305 - expandedHeight: 350
因此,元素太小而不适合帖子内容.您可以尝试删除这些行或将其高度设置为“auto”.
编辑
要回答你的附加评论“我知道如何在页面加载时使第一个元素自动展开吗?”
在我看来,手风琴应该默认处理这种行为[see accordion demo].所以我不确定为什么它没有显示第一个元素.无论如何,你可以通过CSS解决这个问题:
#va-accordion .va-slice:first-child .va-content{
display: block;
}
JSFiddle示例:http://jsfiddle.net/mcDeE/