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

來源

2012-04-11 George Grigorita

在'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/

來源

2012-04-11 20:18:32

其實它只是通過用''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:09:13

感謝您的答案，但以前的用戶的解決方案更容易（至少對我來說）:) – 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>

來源

2012-08-07 06:43:36

javascript手風琴/ css工作不正常

回答

相關問題