accordion javascript/css không hoạt động đúng cách

Question

Tôi có một trang blog mà trên đó tôi phải liệt kê các bài đăng bằng cách sử dụng accordion jQuery. Tôi quản lý để làm cho nó hoạt động nhưng nó không hiển thị đúng, chính xác hơn: chiều cao của trang không phóng to cho phù hợp với kích thước bài đăng. Bạn có thể thấy nó ở đây: http://melisayavas.com/web/?page_id=22

Tôi nghĩ đây là vấn đề về CSS hơn jQuery, tiếc là tôi không có đủ kiến ​​thức về CSS hoặc jQuery để thực sự chắc chắn vấn đề ở đâu và cách khắc phục.

Đây là HTML & JS of the page:

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

Đây là CSS Tôi đã sử dụng:

/* 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; 
} 

Các accordion jQuery đầy đủ có thể được tìm thấy ở đây: http://pastebin.com/hJEufLQU

Answer 1

Trong jquery.vaccordion.js chiều cao của phần tử accordion và chiều cao của các mặt hàng accordion mở rộng đang được thiết explicilty:

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

Bởi vì điều này, các yếu tố này là quá nhỏ để phù hợp với nội dung bài. Bạn có thể thử xóa các dòng này hoặc đặt chiều cao của chúng thành "auto".

Sửa

Để trả lời bình luận addittional bạn " Bất kỳ ý tưởng làm thế nào tôi có thể làm cho các yếu tố đầu tiên để tự động mở rộng khi tải trang?"

Có vẻ với tôi như đàn accordion nên xử lý hành vi này theo mặc định [see accordion demo]. Vì vậy, tôi không chắc chắn tại sao nó không hiển thị yếu tố đầu tiên. Dù sao, bạn có thể giải quyết này qua CSS:

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

JSFiddle dụ: http://jsfiddle.net/mcDeE/

Answer 2

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

Áp dụng tập lệnh thêm lớp 'explicit_va' vào phần tử đó

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

Answer 3

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

thêm: http://source88.blogspot.com/search/label/Accordion