5

アコーディオン jQuery を使用して投稿を一覧表示する必要があるブログ ページがあります。なんとか動作させましたが、正しくレンダリングされていません。より正確には、ページの高さが投稿サイズに応じて拡大されません。ここで見ることができます: http://melisayavas.com/web/?page_id=22

これは 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にあります。

4

3 に答える 3

3

jquery.vaccordion.jsアコーディオン要素の高さと展開されたアコーディオン項目の高さは明示的に設定されています:

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

このため、要素が小さすぎて投稿コンテンツに収まりません。これらの行を削除するか、高さを に設定してみてください"auto"。

編集

追加のコメントに答えるには、「ページの読み込み時に最初の要素を自動展開する方法はありますか?」

アコーディオンはデフォルトでこの動作を処理する必要があるように見えます [アコーディオンのデモを参照]。したがって、最初の要素が表示されない理由がわかりません。とにかく、CSS を介してこれを解決できます。

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

JSFiddle の例: http://jsfiddle.net/mDeE/

于 2012-04-11T20:18:32.830 に答える
1 
<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-11T20:09:13.700 に答える
0 
<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>

詳細：http ：//source88.blogspot.com/search/label/Accordion

于 2012-08-07T06:43:36.467 に答える