javascript手风琴/ css工作不正常

问题描述：

我有一个博客页面，我必须使用手风琴jQuery列出帖子。我设法让它工作，但它不能正确渲染，更准确地说：页面的高度不会相应地扩大到文章大小。你可以在这里看到它：http://melisayavas.com/web/?page_id=22 javascript手风琴/ css工作不正常

我认为这是一个比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; 
}

完整的手风琴jQuery的可以在这里找到：http://pastebin.com/hJEufLQU

在'jquery.vaccordion.js'尝试改变accordionH的'高度'（行300）和'expandedHeight'（行305）改为'auto'（他们当前分别是'450' /'350'） – 2012-04-11 18:53:21

'auto'没有做任何事情，脚本停止工作。现在我正在考虑添加一个固定高度和一个垂直滚动条。 – 2012-04-11 19:31:05

如果完全删除这些行（300/305），会发生什么情况？ – 2012-04-11 19:42:52

答

在jquery.vaccordion.js手风琴元素和扩大手风琴项目的高度的高度被设置explicilty：

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

正因为如此，这些元素都太小，放不下的帖子内容。您可以尝试删除这些行或将其高度设置为"auto"。

编辑

要回答你的addittional评论“任何想法我怎么能做出的第一个元素时，自动扩展的页面加载？”

在我看来像手风琴应如何处理这种行为默认为[see accordion demo]。所以我不确定它为什么没有显示第一个元素。无论如何，你可以通过CSS解决此问题：

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

的jsfiddle例如：http://jsfiddle.net/mcDeE/

其实它只是通过用''auto''替换显式值 - 就像你说的。再次感谢！ – 2012-04-11 20:29:36

@GeorgeGrigorita - 谢谢，我已经更新了我的答案。我还添加了一些关于在页面加载时显示第一个元素的信息。 – 2012-04-12 08:10:41

谢谢，这工作完美！ – 2012-04-12 22:55:04

答

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

感谢您的答案，但以前的用户的解决方案更容易（至少对我来说）:) – 2012-04-11 20:31:21

答

<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手风琴/ css工作不正常

相关推荐