Question

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

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

有人可以解释一下，这甚至可以在他们下面的一个div中显示第一行帖子的内容。第二排帖子等同样的事情。

我自己也记得：

以某种方式组合标签和手风琴？
这纯粹是一个CSS定位问题？
这比手风琴和CSS要复杂得多吗？

从现在开始，我有一个PHP代码，它创建了一个帖子网格。 .poss向左浮动，当行击中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>

Answer 1

我不确定你的首选实现是什么，所以我会提供几个选项。

第一个选项类似于你在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上提供the details of Option 2，我从你提出的问题中提出了这个问题。

如果您有疑问，请告诉我，我希望这会有所帮助。

可扩展帖子的网格，在行下面的div中发布内容

1 个答案: