0

所以我找不到自己的问题/问题的答案或解释。

我想要实现的目标非常复杂。为了说明，这里有一个 JSFiddle - http://jsfiddle.net/GXaeL/3/

有人可以解释一下，这甚至可以在它们下方的一个 div 中显示第一行帖子的内容。第二行帖子等也是如此。

我自己有过这样的想法：

  1. 以某种方式结合 Tabs 和 Accordions？
  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 代码不需要更改。

第二个选项稍微复杂一些，但它允许单独显示每个答案，而不是必须与行中的所有其他答案一起显示。

诚然，可能有更优雅的或以 jQuery UI 为中心的解决方案，但这很好......我也会从中学习。

现在，我将在 jsFiddle 上提供选项 2 的详细信息，这是我从您在问题中提供的内容中分叉出来的。

如果您有任何问题，请告诉我，希望对您有所帮助。

于 2012-05-28T00:33:26.923 回答