HTML / CSS / jQuery Wrap问题

时间：2013-04-11 06:32:21

标签： javascript jquery html css

将此对齐以便正确显示的最佳方法是什么，如下图所示：closed layout

HTML标记：

<div id="main">
  <div id="article-thumbnail-1" class="article-thumbnail">
    <div class="article-open"><img src=".../article-open.png" /></div>
    <div class="article-close"><img src=".../artcle-close.png" /></div>
  </div>
  <article id="article-1" class="article-entry">
    <header class="article-header">
      <h2>This is the article 1 text</h2>
    </header>
    <div class="article-body">
      <p>This is the article 1 body</p>
    </div>
  </article>

  <div id="article-thumbnail-2" class="article-thumbnail">
    <div class="article-open"><img src=".../article-open.png" /></div>
    <div class="article-close"><img src=".../artcle-close.png" /></div>
  </div>
  <article id="article-2" class="article-entry">
    <header class="article-header">
      <h2>This is the article 2 text</h2>
    </header>
    <div class="article-body">
      <p>This is the article 2 body</p>
    </div>
  </article>

  <div id="article-thumbnail-3" class="article-thumbnail">
    <div class="article-open"><img src=".../article-open.png" /></div>
    <div class="article-close"><img src=".../artcle-close.png" /></div>
  </div>
  <article id="article-3" class="article-entry">
    <header class="article-header">
      <h2>This is the article 3 text</h2>
    </header>
    <div class="article-body">
      <p>This is the article 3 body</p>
    </div>
  </article>

  <div id="article-thumbnail-4" class="article-thumbnail">
    <div class="article-open"><img src=".../article-open.png" /></div>
    <div class="article-close"><img src=".../artcle-close.png" /></div>
  </div>
  <article id="article-4" class="article-entry">
    <header class="article-header">
      <h2>This is the article 4 text</h2>
    </header>
    <div class="article-body">
      <p>This is the article 4 body</p>
    </div>
  </article>

  <div id="article-thumbnail-5" class="article-thumbnail">
    <div class="article-open"><img src=".../article-open.png" /></div>
    <div class="article-close"><img src=".../artcle-close.png" /></div>
  </div>
  <article id="article-5" class="article-entry">
    <header class="article-header">
      <h2>This is the article 5 text</h2>
    </header>
    <div class="article-body">
      <p>This is the article 5 body</p>
    </div>
  </article>

  <div id="article-thumbnail-6" class="article-thumbnail">
    <div class="article-open"><img src=".../article-open.png" /></div>
    <div class="article-close"><img src=".../artcle-close.png" /></div>
  </div>
  <article id="article-6" class="article-entry">
    <header class="article-header">
      <h2>This is the article 6 text</h2>
    </header>
    <div class="article-body">
      <p>This is the article 6 body</p>
    </div>
  </article>
</div>

所以基本上如果你点击一个img缩略图文章应该会出现在它下面，如下图所示：this picture

我在打开文章并在其下方显示时遇到问题，以保持缩略图布局。

基本上，当您点击缩略图时，文章应显示在点击缩略图所在的缩略图行下方。

注意，我这样做是为了一个WordPress主题。

JSFiddle：http://jsfiddle.net/PkZrZ/

2 个答案:

答案 0 :(得分：1)

这是最简单的解决方案。它取决于tumbnail的数据属性。因此，如果将数据属性添加到tumbnail标记是不可接受的，请告诉我，我会尝试做其他事情。 http://jsfiddle.net/d3D9p/

我改变了元素的顺序。三篇文章中有三篇文章。 （第四至第六）相同

<div id="main">
<div class="article-thumbnail" data-num="1">
    <div class="article-open"><img src="" /></div>
    <div class="article-close"><img src="" /></div>
</div>


<div class="article-thumbnail" data-num="2">
    <div class="article-open"><img src="" /></div>
    <div class="article-close"><img src="" /></div>
</div>
<div class="article-thumbnail" data-num="3">
    <div class="article-open"><img src="" /></div>
    <div class="article-close"><img src="" /></div>
</div>
<article id="article-1" class="article-entry">
    <header class="article-header">
        <h2>This is the article 1 text</h2>     
    </header>
    <div class="article-body">
        <p>This is the article 1 body</p>       
    </div>
</article>
<article id="article-2" class="article-entry" >
    <header class="article-header">
        <h2>This is the article 2 text</h2>     
    </header>
    <div class="article-body">
        <p>This is the article 2 body</p>       
    </div>
</article>
<article id="article-3" class="article-entry">
    <header class="article-header">
        <h2>This is the article 3 text</h2>     
    </header>
    <div class="article-body">
        <p>This is the article 3 body</p>       
    </div>
</article>

也是新的jquery：

隐藏每篇文章，然后仅显示与选定的tumbnail相对应的内容。

$('.article-thumbnail').click(function() {
    $('.article-entry').css({"display": "none"});
    $('#article-'+$(this).data("num")).css({"display": "block"});
});

UPD：现在无法自己测试。但你可以试试像folow： 首先阅读WP_Query，如果还没有。 你可以抓住所有帖子：

&get_posts()

然后结合简单的php循环和

next_post()

在添加tumbnail之前，您可以显示您想要的确切帖子数量。 希望它能以某种方式帮助你。

如果这没有帮助，你可以嵌套循环，在循环中显示将显示缩略图的文章，并在每次运行tumbnail_loop之后运行articles_loop，它将显示其中的三个并返回到tumbnail_loop。

答案 1 :(得分：1)

你有这样的标记：

<div id="article-thumbnail-1" class="article-thumbnail">
        <div class="article-open"><img src=".../article-open.png" /></div>
        <div class="article-close"><img src=".../artcle-close.png" /></div>
    </div>
    <article id="article-1" class="article-entry">
        <header class="article-header">
            <h2>This is the article 1 text</h2>     
        </header>
        <div class="article-body">
            <p>This is the article 1 body</p>       
        </div>
    </article>

因此，您已将任何缩略图的内容（即article）直接放在该块旁边。这就是为什么当你点击一个给定的块，即div。article-thumbnail时，相关的article元素会在那里自我呈现，即与它相邻。因此流量，即您的布局发生变化。

您需要更改标记。

这样做。

将所有缩略图分开，将文章对应分开。

类似

|<Upper Thumbnails Section>|
^^^^^^^^^^^^^^^^^^^^^^^^^^^
|<upper article container>| //invisible by default

|<Lower Thumbnails Section>|
^^^^^^^^^^^^^^^^^^^^^^^^^^^
|<lower article container>| //invisible by default

请参阅此工作fiddle。

即

<div class="article-thumbnail" data-target="article-1" >
     ..
     ..
</div>
<div class="article-thumbnail" data-target="article-2" >
     ..
     ..
</div>
<div class="article-thumbnail" data-target="article-3" >
     ..
     ..
</div>

<div class="container">
   <article id="article-1" class="article-entry">
   </article>
   <article id="article-2" class="article-entry">
   </article>
   <article id="article-3" class="article-entry">
   </article>
 </div>

并使用以下脚本切换您的内容：

var prev;
$('.article-thumbnail').click(function() {
    var _target= $(this).data("target");
    var _current=$('#'+_target);
    var hideCss={'height':'0px'};
    var showCss={'height':'200px'};

    if(prev){
        prev.hide();
        prev.parent().stop().animate(hideCss,1000);
    }
    _current.show();
    _current.parent().stop().animate(showCss,1000);

    prev= _current
});
相关问题
最新问题