[英]javascript accordion / css not working properly
I have a blog page on which I have to list the posts using an accordion jQuery. 我有一个博客页面,我必须使用手风琴jQuery列出帖子。 I managed to get it to work but it's not rendering properly, more precisely: the height of the page does not enlarge accordingly to the post size. 我设法让它工作,但它没有正确渲染,更确切地说:页面的高度不会相应地扩大到帖子大小。 You can see it here: http://melisayavas.com/web/?page_id=22 你可以在这里看到它: http : //melisayavas.com/web/?page_id = 22
I think this is more a CSS problem than a jQuery, unfortunately I don't have enough knowledge of CSS or jQuery to actually be sure where the problem is and how to fix it. 我认为这是一个CSS问题而不是jQuery,遗憾的是我没有足够的CSS或jQuery知识来确定问题所在以及如何解决它。
This is the HTML & JS of the page: 这是页面的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>
This is the CSS I used: 这是我使用的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;
}
The full accordion jQuery can be found here: http://pastebin.com/hJEufLQU 完整的手风琴jQuery可以在这里找到: http : //pastebin.com/hJEufLQU
In jquery.vaccordion.js
the height of the accordion element and height of expanded accordion items are being set explicilty: 在jquery.vaccordion.js
中,手风琴元素的高度和扩展的手风琴项目的高度设置为explicilty:
line 300 - accordionH : 450
...
line 305 - expandedHeight: 350
Because of this, the elements are too small to fit the post content. 因此,元素太小而不适合帖子内容。 You can either try removing these lines or setting their heights to "auto"
. 您可以尝试删除这些行或将其高度设置为"auto"
。
Edit 编辑
To answer your addittional comment " Any idea how I can make the first element to auto-expand when the page loads? " 要回答你的附加评论“ 我知道如何在页面加载时使第一个元素自动展开吗? ”
It looks to me like accordion should handle this behavour by default [ see accordion demo ]. 在我看来,手风琴应该默认处理这种行为[ 见手风琴演示 ]。 So I am not sure why it is not showing the first element. 所以我不确定为什么它没有显示第一个元素。 Anyway, you can resolve this via CSS: 无论如何,你可以通过CSS解决这个问题:
#va-accordion .va-slice:first-child .va-content{
display: block;
}
JSFiddle example: http://jsfiddle.net/mcDeE/ JSFiddle示例: http : //jsfiddle.net/mcDeE/
<script>
$(document).ready(function() {
$('.va-slice').click(function(){
var index_div = $(this).index();
var element = $('.va-slice').eq(index_div);
});
});
</script>
Apply the script which add a class 'explicit_va' on that element 应用在该元素上添加类'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>
More : http://source88.blogspot.com/search/label/Accordion 更多: http : //source88.blogspot.com/search/label/Accordion
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.