0

だから私は自分が持っている問題/質問に対する答えや説明を見つけることができません。

私が達成したいことはかなり複雑です。説明のために、ここにJSFiddleがあります-http ://jsfiddle.net/GXaeL/3/

誰かが私を説明できますか、これはそれらの下の1つのdivに最初の行の投稿のコンテンツを表示することさえ可能ですか？2列目の投稿なども同様です。

私自身、次のことを念頭に置いていました。

  1. どういうわけかタブとアコーディオンを組み合わせるには？
  2. これは純粋にCSSのポジショニングの問題ですか？
  3. これは、アコーディオンやCSSよりもはるかに複雑ですか？

今から、投稿のグリッドを作成するPHPコードがあります。.postsは左にフロートされ、3に達すると行がクリアされます。 

<div class="post">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if ( has_post_thumbnail() ) {
      the_post_thumbnail('thumbnail');
} else { ?>
      <img src="<?php bloginfo('template_directory'); ?>/fallback_image.jpg" alt="<?php the_title(); ?>" />
<?php } ?>
</a>
</div>
  <?php
     if($c == $bpr) :
  ?>
  <div class="clr"></div>

<?php
   $c = 0;
   endif;
?>

<?php
  $c++;
  endwhile;
?>
<div class="clr"></div>

たぶん、誰かが私をこれの正しい道に押しやることができますか？

4

1 に答える 1

0

希望する実装が何であるか正確にはわからないので、いくつかのオプションを提供します。

最初のオプションは、jsFiddleでまとめたものと似ていますが、「トリガー」<div>タグを<div>独自のタグでラップし、上下にスライドしてい<div>た単一の「コンテンツ」タグに「コンテンツ」タグを追加した点が異なります...簡単<div>コードで説明：

    <div id="row1" class="item-info">
        <div class="item">item-1</div>      
        <div class="item">item-2</div>
        <div class="item">item-3</div>
        <div class="item">item-4</div>
    </div>
    <div id="contentRow1" class="item-info" style="display:none;">
        <div class="item-content">content div for item-1</div>      
        <div class="item-content">content div for item-2</div>
        <div class="item-content">content div for item-3</div>
        <div class="item-content">content div for item-4</div>
    </div>

このソリューションでは、使用していたjQueryコードを変更する必要はありません。

2番目のオプションはもう少し複雑ですが、他のすべての回答を行に表示するのではなく、各回答を個別に表示できます。

確かに、よりエレガントな、またはjQuery UIに焦点を当てたソリューションがあるかもしれませんが、それは問題ありません...私もそれから学びます。

今のところ、私はjsFiddleのオプション2の詳細を提供します。これは、あなたが質問で提供したものから分岐したものです。

ご不明な点がございましたら、お気軽にお問い合わせください。お役に立てば幸いです。

于 2012-05-28T00:33:26.923 に答える